Einfachste Möglichkeit, 2 Klassen in jQuery umzuschalten

Wenn ich Klasse .A und Klasse .B habe und beim Klicken auf die Schaltfläche dazwischen wechseln möchte, was ist eine gute Lösung dafür in jQuery? Ich verstehe immer noch nicht, wie es toggleClass()funktioniert.

Gibt es eine Inline-Lösung, um es in onclick=""Ereignis zu setzen ?

Wenn Ihr Element die Klasse Avon Anfang an verfügbar macht, können Sie schreiben:

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

Dadurch wird die Klasse entfernt Aund die Klasse hinzugefügt B. Wenn Sie dies erneut tun, wird die Klasse entfernt Bund die Klasse wiederhergestellt A.

Wenn Sie mit den Elementen übereinstimmen möchten, die eine der Klassen verfügbar machen , können Sie einen Selektor für mehrere Klassen verwenden und Folgendes schreiben:

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

Hier ist eine vereinfachte Version: ( wenn auch nicht elegant, aber leicht zu folgen )

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

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

});

Alternativ eine ähnliche Lösung:

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

Ich habe ein jQuery-Plugin für DRY erstellt:

$.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);
  });
};

Sie können es einfach hier versuchen, kopieren und in der Konsole ausführen und dann versuchen:

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

Ihre onClickAnfrage:

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

Probieren Sie es aus: https://jsfiddle.net/v15q6b5y/

Nur die JS à la jQuery :

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

Hier ist ein anderer "unkonventioneller" Weg.

• Dies impliziert die Verwendung von Unterstrich oder Lodash .
• Es wird ein Kontext angenommen, in dem Sie:
  • Das Element hat keine Init-Klasse (das heißt, Sie können toggleClass ('a b') nicht ausführen.)
  • Sie müssen die Klasse dynamisch von irgendwoher bekommen

Ein Beispiel für dieses Szenario könnten Schaltflächen sein, bei denen die Klasse für ein anderes Element aktiviert werden muss (z. B. Registerkarten in einem Container).

// 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);

Die einfachste Lösung ist für toggleClass()beide Klassen einzeln.

Angenommen, Sie haben ein Symbol:

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

Zum Umschalten zwischen fa-angle-downund fa-angle-upgehen Sie wie folgt:

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

Da wir fa-angle-downam Anfang hatten, ohne fa-angle-upjedes Mal beide umzuschalten, geht einer, damit der andere erscheint.

Wechseln Sie mit Jquery zwischen zwei Klassen 'A' und 'B'.

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