Lucrul cu metoda toggleClass în jQuery

Există de asemenea o metodă utilă toggleClass, care va adăuga clasa specificată, dacă aceasta nu există, și o va elimina dacă există. Poate fi necesară pentru ca la click pe același buton cu elementul paginii să aibă loc modificări periodice.

Să analizăm această metodă cu un exemplu. Să presupunem că avem următoarele stiluri CSS:

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

De asemenea, există un paragraf cu clasa zzz:

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

Să facem, de exemplu, astfel încât la prima apăsare pe buton, elementului să i se adauge clasa red, care adaugă culoarea roșie, iar la apăsarea repetată - această clasă va fi îndepărtată și culoarea roșie va dispărea. Dacă apăsați din nou pe buton - totul se va repeta.

Încercați să rulați următorul cod și să vă convingeți de acest lucru (clasa zzz evidențiază cursiv, pentru a arăta că toggleClass nu va deranja funcționarea altor clase):

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

După prima apăsare codul HTML va arăta astfel (se va adăuga clasa red):

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

Iar după a doua apăsare - așa (va dispărea clasa red):

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

Adăugați tuturor li clasa www, dacă aceasta nu există, și eliminați-o, dacă există.