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 ?
jquery
toggleclass
Stewie Griffin
quelle
quelle
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) zuAntworten:
Wenn Ihr Element die Klasse
A
von Anfang an verfügbar macht, können Sie schreiben:Dadurch wird die Klasse entfernt
A
und die Klasse hinzugefügtB
. Wenn Sie dies erneut tun, wird die Klasse entferntB
und die Klasse wiederhergestelltA
.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:
quelle
var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
Hier ist eine vereinfachte Version: ( wenn auch nicht elegant, aber leicht zu folgen )
Alternativ eine ähnliche Lösung:
quelle
toggle
ist in jquery 2.0Ich habe ein jQuery-Plugin für DRY erstellt:
Sie können es einfach hier versuchen, kopieren und in der Konsole ausführen und dann versuchen:
quelle
Ihre
onClick
Anfrage:Probieren Sie es aus: https://jsfiddle.net/v15q6b5y/
Nur die JS à la jQuery :
quelle
Hier ist ein anderer "unkonventioneller" Weg.
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).
quelle
Die einfachste Lösung ist für
toggleClass()
beide Klassen einzeln.Angenommen, Sie haben ein Symbol:
Zum Umschalten zwischen
fa-angle-down
undfa-angle-up
gehen Sie wie folgt:Da wir
fa-angle-down
am Anfang hatten, ohnefa-angle-up
jedes Mal beide umzuschalten, geht einer, damit der andere erscheint.quelle
Wechseln Sie mit Jquery zwischen zwei Klassen 'A' und 'B'.
quelle