Werken met de toggleClass methode in jQuery

Er is ook een handige methode toggleClass, die de opgegeven klasse zal toevoegen, als deze niet aanwezig is, en verwijderen als deze wel aanwezig is. Dit kan nuttig zijn wanneer er bij een klik op dezelfde knop periodieke veranderingen met een pagine-element moeten plaatsvinden.

Laten we deze methode bekijken aan de hand van een voorbeeld. Stel we hebben de volgende CSS-stijlen:

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

Er is ook een alinea met de klasse zzz:

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

Laten we bijvoorbeeld instellen dat bij de eerste klik op de knop, het element de klasse red krijgt, die een rode kleur toevoegt, en bij de tweede klik - deze klasse wordt verwijderd en de rode kleur verdwijnt. Als er weer op de knop wordt geklikt - herhaalt alles zich.

Probeer de volgende code uit te voeren en overtuig jezelf ervan (de klasse zzz markeert de tekst met cursief, om te laten zien dat toggleClass niet andere klassen hindert in hun werking):

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

Na de eerste klik ziet de HTML-code er als volgt uit (de klasse red wordt toegevoegd):

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

En na de tweede klik - zo (de klasse red verdwijnt):

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

Voeg aan alle li de klasse www toe, als deze niet aanwezig is, en verwijder deze als hij wel aanwezig is.