Toggle-Klasse in jQuery

Der heutige Beitrag behandelt die Klasse toggle in jQuery.

Toggle-Klasse in jQuery

jQuery bietet eine eingebaute Klasse-Toggle-Methode. Dieses Ereignis fügt basierend auf dem Vorhandensein der Klasse oder dem Wert des Statusarguments jedem Element in der Gruppe übereinstimmender Elemente eine oder mehrere Klassen hinzu oder entfernt sie.

Syntax:

.toggleClass(className).toggleClass(classNames)

1. className ist eine oder mehrere Klassen (durch Leerzeichen getrennt), die für jedes Element in der übereinstimmenden Menge umgeschaltet werden können.
2. classNames ist ein Array von Klassen, die für jedes Element in der übereinstimmenden Menge umschalten.

Die Methode toggle nimmt eine oder mehrere Klassen als Parameter. Wenn ein Element im übereinstimmenden Elementsatz die Klasse bereits in der ersten Version hat, wird es entfernt.

Wenn ein Element die Klasse nicht hat, wird es hinzugefügt. Wir können zum Beispiel .toggleClass() auf ein einfaches <div> anwenden.

Das zweite Modell von .toggleClass() verwendet den zweiten Parameter, um zu bestimmen, ob die Klasse hinzugefügt oder entfernt werden soll. Wenn der Wert dieses Parameters true ist, wird die Klasse hinzugefügt; bei false wird die Klasse eliminiert.

Wenn keine Argumente überschritten werden, schaltet .toggleClass() alle Klassen des Elements um, wenn .toggleClass() zum ersten Mal aufgerufen wird.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

<p class="blue">Click on me to change color</p>

.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}

$('p').click(function() {
  $(this).toggleClass('highlight');
});

Das obige Beispiel hat ein Absatz-Tag mit einer blauen Klasse definiert. Sobald der Benutzer auf den Absatz geklickt hat, wird .toggleClass("highlight") auf den Absatz angewendet.

Führen Sie den obigen Code in einem beliebigen Browser aus, der jQuery unterstützt. Das Ergebnis wird unten angezeigt.

Ausgabe:

Vor toggle:

Nach toggle: