jQuery-де toggleClass әдісімен жұмыс

Сондай-ақ пайдалы toggleClass әдісі бар, ол көрсетілген класты жоқ болса қосады, бар болса алып тастайды. Ол бір батырманы басу арқылы бет элементімен мерзімді өзгерістер болуы үшін қажет болуы мүмкін.

Осы әдісті мысалмен қарастырайық. Бізде келесі CSS стильдері бар делік:

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

Сондай-ақ zzz класы бар абзац бар:

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

Мысалы, келесіні жасайық: батырманы бірінші рет басқанда, элементке қызыл түс қосатын red класы қосылады, ал қайта басқанда - бұл класс алынып тасталады және қызыл түс жоғалады. Егер батырманы тағы бассаңыз - бәрі қайталанады.

Келесі кодты іске қосып, өзіңіз көріңіз (zzz класы курсивпен бөлектейді, toggleClass басқа кластардың жұмыс істеуіне кедергі келтірмейтінін көрсету үшін):

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

Бірінші рет басқаннан кейін HTML коды келесідей болады (red класы қосылады):

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

Ал екінші рет басқаннан кейін - келесідей (red класы жоғалады):

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

Барлық li элементтеріне www класын жоқ болса қосыңыз, бар болса алыңыз.