Toggle-Klasse in jQuery

Shraddha Paghdar 15 Februar 2024
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:

vor toggle: Klasse

Nach toggle:

nach der Toggle-Klasse

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Verwandter Artikel - jQuery Toggle