Meetodi toggleClass kasutamine jQuery-s

Samuti on olemas kasulik meetod toggleClass, mis lisab määratud klassi, kui seda pole, ja eemaldab selle, kui see on olemas. See võib olla vajalik, et ühe ja sama nupu klõpsamisel lehe elemendiga toimuksid perioodilised muutused.

Vaatleme seda meetodit näite abil. Olgu meil järgmised CSS-stiilid:

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

Samuti on olemas lõik klassiga zzz:

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

Teeme näiteks nii, et esimesel nupuvajutusel lisatakse elemendile klass red, mis lisab punase värvi, ja teisel korral - see klass eemaldatakse ja punane värv kaob. Kui nuppu uuesti vajutada, kordub kõik taas.

Proovige käivitada järgmine kood ja veenduge selles (klass zzz tõstab esile kaldkirja, et näidata, et toggleClass ei häiri teiste klasside tööd):

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

Pärast esimest vajutust näeb HTML-kood välja selline (lisatakse klass red):

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

Ja pärast teist vajutust - selline (kaob klass red):

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

Lisage kõigile li klass www, kui seda pole, ja eemaldage, kui on.