Einfachste Möglichkeit, 2 Klassen in jQuery umzuschalten

218

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 ?

Stewie Griffin
quelle
5
Inline JS ( onclick="") ist schlecht. Warum verwenden Sie nicht jQuery, um einen geeigneten Ereignishandler (oder ein Delegate / Live-Ereignis, wenn Sie viele Elemente mit demselben Handler haben) zu
registrieren

Antworten:

511

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");
Frédéric Hamidi
quelle
3
Was ist, wenn ich anstelle von Element je nach Status Klasse A oder B einordnen möchte?
Stewie Griffin
1
Beachten Sie, dass Sie das Objekt, das Sie umschalten möchten, zwischenspeichern sollten, anstatt jedes Mal die Elemente auszuwählen. Die häufigste Verwendung zum Umschalten von Klassen befindet sich in einem Klick-Handler. var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
Mummybot
1
@mummybot - als herablassend gekennzeichnet. Frédéric - was ist, wenn das Element "von Anfang an" keine Klasse hat? das ist auch ein wichtiger Zustand.
vsync
3
Das funktioniert nicht mehr. Fügt nun beide Klassen gleichzeitig hinzu und entfernt sie.
Fabián
1
@ FrédéricHamidi Ich weiß nicht, was ich falsch gemacht habe, aber es hat nicht funktioniert, als ich es versucht habe. Jetzt scheint es in Ordnung zu sein. In meinem Fall wurden beide Klassen gleichzeitig hinzugefügt und entfernt, aber es scheint jetzt zu funktionieren. Wahrscheinlich habe ich etwas anderes durcheinander gebracht und es hat diese Funktion beeinträchtigt. Ich habe meinen Kommentar gelöscht. Entschuldigung für die Verwirrung.
BurakUeda
40

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
});
Rion Williams
quelle
3
Ich glaube, diese Art der Verwendung toggleist in jquery 2.0
vittore
3
Danke vittore. Es ist offensichtlich eine ältere Antwort aus dem Jahr 2011. Ich habe die Syntax entsprechend aktualisiert.
Rion Williams
4

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');
vsync
quelle
2

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

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);
Luca Reghellin
quelle
-1

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.

Überwinder
quelle
-1

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

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

Liebe Kumar
quelle