Arbeit mit der Methode toggleClass in jQuery

Es gibt auch eine nützliche Methode toggleClass, die die angegebene Klasse hinzufügt, wenn sie nicht vorhanden ist, und entfernt, wenn sie vorhanden ist. Sie kann benötigt werden, damit bei einem Klick auf denselben Button mit einem Seitenelement periodische Änderungen stattfinden.

Betrachten wir diese Methode an einem Beispiel. Angenommen, wir haben die folgenden CSS-Stile:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

Es gibt auch einen Absatz mit der Klasse zzz:

<p class="zzz" id="test">text</p>
<button>click</button>

Lassen Sie uns zum Beispiel erreichen, dass beim ersten Klick auf den Button dem Element die Klasse red hinzugefügt wird, die die rote Farbe hinzufügt, und beim erneuten Klick - diese Klasse entfernt wird und die rote Farbe verschwindet. Wenn man wieder auf den Button klickt - wiederholt sich alles erneut.

Versuchen Sie, den folgenden Code auszuführen und überzeugen Sie sich davon (die Klasse zzz hebt den Text kursiv hervor, um zu zeigen, dass toggleClass nicht die Arbeit anderer Klassen stören wird):

$('button').click(function() {
	$('#test').toggleClass('red');
});

Nach dem ersten Klick wird der HTML-Code so aussehen (die Klasse red wird hinzugefügt):

<p class="zzz red" id="test">text</p>
<button>click</button>

Und nach dem zweiten Klick - so (die Klasse red verschwindet):

<p class="zzz" id="test">text</p>
<button>click</button>

Fügen Sie allen li die Klasse www hinzu, wenn sie nicht vorhanden ist, und entfernen Sie sie, wenn sie vorhanden ist.