toggleClass-metodin käyttö jQueryssä

On olemassa myös hyödyllinen metodi toggleClass, joka lisää määritetyn luokan, jos sitä ei ole, ja poistaa sen, jos se on olemassa. Sitä voi tarvita, jotta samaa painiketta napsautettaessa sivun elementillä tapahtuisi jaksollisia muutoksia.

Tarkastellaan tätä menetelmää esimerkin avulla. Oletetaan, että meillä on seuraavat CSS-tyylit:

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

Lisäksi on kappale, jossa on luokka zzz:

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

Tehdään esimerkiksi niin, että ensimmäisellä painikkeen painalluksella elementille lisätään luokka red, joka lisää punaisen värin, ja toisella painalluksella - tämä luokka poistetaan ja punainen väri katoaa. Jos painat painiketta uudelleen - kaikki toistuu uudelleen.

Yritä suorittaa seuraava koodi ja varmista siitä (luokka zzz korostaa kursiivilla, osoittaakseen, että toggleClass ei häiritse muiden luokkien toimintaa):

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

Ensimmäisen painalluksen jälkeen HTML-koodi näyttää tältä (luokka red lisätään):

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

Ja toisen painalluksen jälkeen - tältä (luokka red katoaa):

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

Lisää kaikille li-elementeille luokka www, jos sitä ei ole, ja poista se, jos se on olemassa.