Le moyen le plus simple de basculer de 2 classes dans jQuery

Si j’ai la classe .A et la classe .B et que vous voulez basculer entre un clic sur un bouton, quelle est la bonne solution pour cela dans jQuery? Je ne comprends toujours pas comment toggleClass() fonctionne.

Existe-t-il une solution en ligne pour le mettre dans l’événement onclick="" ?

Si votre élément expose la classe A depuis le début, vous pouvez écrire:

 $(element).toggleClass("AB"); 

Cela supprimera la classe A et appenda la classe B Si vous recommencez, cela supprimera la classe B et rétablira la classe A

Si vous souhaitez faire correspondre les éléments qui exposent l’une ou l’autre classe, vous pouvez utiliser un sélecteur de classes multiples et écrire:

 $(".A, .B").toggleClass("AB"); 

Voici une version simplifiée: ( mais pas élégante, mais facile à suivre )

 $("#yourButton").toggle(function() { $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b' }, function() { $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a' }); 

Sinon, une solution similaire:

 $('#yourbutton').click(function() { $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa }); 

J’ai fait un plugin jQuery pour travailler en DRY:

 $.fn.toggle2classes = function(class1, class2){ if( !class1 || !class2 ) return this; return this.each(function(){ var $elm = $(this); if( $elm.hasClass(class1) || $elm.hasClass(class2) ) $elm.toggleClass(class1 +' '+ class2); else $elm.addClass(class1); }); }; 

Vous pouvez simplement essayer ici, copier et exécuter ceci dans la console, puis essayer:

 $('body').toggle2classes('a', 'b'); 

Voici un autre moyen «non conventionnel».

  • Cela implique l’utilisation de soulignement ou de lodash .
  • Cela suppose un contexte où vous:
    • l’élément n’a pas de classe init (cela signifie que vous ne pouvez pas faire toggleClass (‘a b’))
    • vous devez obtenir la classe dynamicment de quelque part

Un exemple de ce scénario pourrait être des boutons dont la classe doit être activée sur un autre élément (par exemple, des tabs dans un conteneur).

 // 1: define the array of switching classes: var types = ['web','email']; // 2: get the active class: var type = $(mybutton).prop('class'); // 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array: $mycontainer.removeClass(_.without(types, type)[0]).addClass(type); 

Votre demande onClick :

 Click Me 

Essayez-le: https://jsfiddle.net/v15q6b5y/


Juste le JS à la jQuery :

 $('.selector').toggleClass('A', !state).toggleClass('B', state); 

La solution la plus simple consiste à toggleClass() deux classes individuellement.

Disons que vous avez une icône:

   

Pour basculer entre fa-angle-down et fa-angle-up procédez comme suit:

  $('.somesortinggger').click(function(){ $('#target').toggleClass('fa-angle-down'); $('#target').toggleClass('fa-angle-up'); }); 

Étant donné que nous avions un fa-angle-down au début sans fa-angle-up chaque fois que vous basculiez les deux, l’un part pour que l’autre apparaisse.