Einfachste Möglichkeit, 2 Klassen in jQuery umzuschalten
Lesezeit: 4 Minuten
Stewie Griffin
Wenn ich Klasse .A und Klasse .B habe und auf Knopfdruck zwischen ihnen wechseln möchte, was ist eine nette Lösung dafür in jQuery? Ich verstehe immer noch nicht wie toggleClass() funktioniert.
Gibt es eine Inline-Lösung, um es einzufügen onclick="" Veranstaltung?
Inline-JS (onclick="") ist schlecht. Warum verwenden Sie nicht jQuery, um einen geeigneten Event-Handler zu registrieren (oder ein Delegate/Live-Ereignis, wenn Sie viele Elemente mit demselben Handler haben)
– Meister der Diebe
9. August 11 um 19:51 Uhr
Frédéric Hamidi
Wenn Ihr Element class verfügbar macht A von anfang an kannst du schreiben:
$(element).toggleClass("A B");
Dadurch wird die Klasse entfernt A und Klasse hinzufügen B. Wenn Sie das noch einmal tun, wird die Klasse entfernt B und Klasse wieder aufnehmen A.
Wenn Sie die Elemente abgleichen möchten, die eine der beiden Klassen verfügbar machen, können Sie a verwenden mehrereKlassenauswahl und schreibe:
$(".A, .B").toggleClass("A B");
Was ist, wenn ich anstelle von Element je nach Zustand Klasse A oder B setzen möchte?
– Stewie Griffin
9. August 11 um 19:50 Uhr
Beachten Sie, dass Sie das Objekt, das Sie umschalten möchten, zwischenspeichern sollten, anstatt die Elemente jedes Mal auszuwählen, da die häufigste Verwendung für das Umschalten von Klassen in einem Klick-Handler ist. var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
– Mumienbot
27. März 15 um 8:53 Uhr
@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
21. September 15 um 22:33 Uhr
Dies funktioniert nicht mehr. Jetzt werden beide Klassen gleichzeitig hinzugefügt und entfernt.
– Fabian
3. Mai 18 um 1:35 Uhr
@FrédéricHamidi Ich weiß nicht, was ich falsch gemacht habe, aber es hat nicht funktioniert, als ich es versuchte. 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 vermasselt und es hat diese Funktion beeinflusst. Ich habe meinen Kommentar gelöscht. Sorry für die Verwirrung.
– BurakUeda
12. Dezember 19 um 6:05 Uhr
Rion Williams
Hier ist eine vereinfachte Version: (wenn auch nicht elegant, aber einfach zu folgen)
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, deren Klasse auf einem anderen Element umgeschaltet werden soll (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);
Überwinder
Die einfachste Lösung ist toggleClass() beide Klassen einzeln.
Angenommen, Sie haben ein Symbol:
<i id="target" class="fa fa-angle-down"></i>
Zum Umschalten zwischen fa-angle-down und fa-angle-up Mach Folgendes:
Inline-JS (
onclick=""
) ist schlecht. Warum verwenden Sie nicht jQuery, um einen geeigneten Event-Handler zu registrieren (oder ein Delegate/Live-Ereignis, wenn Sie viele Elemente mit demselben Handler haben)– Meister der Diebe
9. August 11 um 19:51 Uhr