jQuery + CSS: passer à « chargement »

Question

je la configuration suivante:

<div class="click red"></div> 
<div class="click green"></div> 
<div class="click blue"></div> 

et quand « cliquez sur » est cliqué, je veux ajouter la classe « charge » à la div. J'ai réussi cela bien, mais "rouge" "vert" et "bleu" ont tous un ensemble d'images de fond, donc j'ai besoin de supprimer cette classe. Maintenant, je sais comment faire cela de manière bâclée, je prends la classe pour le dib "click blue" (comme renvoyé par jquery) et puis dépouiller ce dont j'ai besoin et le remplacer mais c'est incroyablement bâclé et je peux ' Je vois que c'est la bonne méthode.

Quelle est la bonne façon d'aborder cela? Je dois enlever la seconde classe de la div et la remplacer par la classe "load". Existe-t-il une sorte de méthode pour appeler chaque classe individuellement, .attr ("class") [2]?

Answer 1

Si vous connaissez la classe est « clic », vous pouvez mettre la classe, plutôt ajouter/enlever, comme ceci:

$('div').attr('class', 'click load'); 

Si vous connaissez les classes (pas sûr ceci est un exemple simplifié) que vous souhaitez supprimer, vous pouvez le faire:

$("div").removeClass('red green blue').addClass('load'); 

---

Edit: Based sur les commentaires - Vous pouvez stocker la classe en utilisant $.data() et saisir plus tard pour restaurer après la charge, comme ceci:

Dans votre fonction de clic:

$.data(this, 'class', $(this).attr('class')); //store the original class 
$(this).attr('class', 'click load');   //set loading class 

Puis restaurer plus tard:

$(this).attr('class', $.data(this, 'class')); //restore orignal class