Le moyen le plus simple de basculer 2 classes dans jQuery

Si j'ai la classe .A et la classe .B et que je souhaite basculer entre les clics sur le bouton, quelle est une bonne solution pour cela dans jQuery? Je ne comprends toujours pas comment ça toggleClass()marche.

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

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

$(element).toggleClass("A B");

Cela supprimera la classe Aet ajoutera la classe B. Si vous recommencez, cela supprimera la classe Bet 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("A B");

Voici une version simplifiée: ( quoique 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'

});

Alternativement, une solution similaire:

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

J'ai créé un plugin jQuery pour travailler 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 l'essayer ici, copier et exécuter cela dans la console, puis essayer:

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

Votre onClickdemande:

<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>

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

Juste le JS à la jQuery :

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

Voici une autre façon «non conventionnelle».

• Cela implique l'utilisation de soulignement ou de lodash .
• Il 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 dynamiquement 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 onglets 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);

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

Disons que vous avez une icône:

    <i id="target" class="fa fa-angle-down"></i>

Pour basculer entre fa-angle-downet fa-angle-upprocédez comme suit:

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

Puisque nous avions fa-angle-downau début sans à fa-angle-upchaque fois basculer les deux, l'un part pour que l'autre apparaisse.

Basculez entre deux classes «A» et «B» avec Jquery.

$ ('# selecor_id'). toggleClass ("A B");