jQuery-də toggleClass metodu ilə işləmək

Həmçinin faydalı bir toggleClass metodu var, bu metod göstərilən sinifi əlavə edəcək, əgər o yoxdursa, və əgər varsa onu siləcək. O, eyni düyməyə kliklədikdə səhifə elementi ilə dövri dəyişikliklər baş verməsi üçün lazım ola bilər.

Gəlin bu metodu bir nümunə ilə nəzərdən keçirək. Fərz edək ki, bizdə aşağıdakı CSS stilləri var:

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

Həmçinin zzz sinifi olan bir abzas var:

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

Gəlin, məsələn, elə edək ki, düyməyə ilk klikdə elementə qırmızı rəng əlavə edən red sinifi əlavə olunsun, təkrar klikdə isə bu sinif silinsin və qırmızı rəng yox olsun. Əgər yenidən düyməyə klikləsəniz - hər şey təkrar olunacaq.

Aşağıdakı kodu işə salmağa çalışın və əmin olun (zzz sinifi kursivlə vurğulayır, toggleClass-ın digər siniflərin işləməsinə mane olmayacağını göstərmək üçün):

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

İlk klikdən sonra HTML kodu belə görünəcək (red sinifi əlavə olunacaq):

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

İkinci klikdən sonra isə belə (red sinifi yox olacaq):

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

Bütün li elementlərinə www sinifini əlavə edin, əgər o yoxdursa, və əgər varsa silin.