web-dev-qa-db-fra.com

Meilleure façon de basculer 2 classes dans jQuery

Si j'ai la classe .A et la classe .B et que je souhaite basculer entre les clics, quelle est la solution idéale pour cela dans jQuery? Je ne comprends toujours pas comment fonctionne toggleClass().

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

jquerytoggleclass
204
Stewie Griffin

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

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

Cela supprimera la classe A et ajoutera 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 multiplesélecteur de classe et écrire:

$(".A, .B").toggleClass("A B");
472
Frédéric Hamidi

Voici une version simplifiée: ( bien que pas élégant, 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
});
36
Rion Williams

J'ai créé un plugin jQuery pour travailler à sec:

$.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 ceci dans la console, puis essayer:

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

Votre demande onClick:

<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);
1
gdibble

Voici une autre manière "non conventionnelle".

  • Cela implique l'utilisation de nderscore ou lodash .
  • Cela suppose un contexte dans lequel 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);
1
Luca Reghellin