jQuery-de toggleClass metodu bilen işlemek

Şeýle-de peýdaly toggleClass metody bar, ol görkezilen klassy ýok bolsa goşar, bar bolsa aýyrar. Ol bir knopkanyň üstüne basylanda sahypa elementinde döwreli üýtgeşmeler bolmagy üçin gerek bolup biler.

Bu metody mysalda gözden geçirýäris. Bizde aşakdaky CSS stilleri bar diýeli:

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

Şeýle-de zzz klassy bar abzas bar:

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

Geliň, mysal üçin, şeýle edeli: knopkanyň üstüne birinji gezek basylanda, elemente red klassy goşulsyn, ol gyzyl reňk goşýar, gaýtalan basgyçda bolsa bu klass aýrylsyn we gyzyl reňk ýogalsyn. Ýene knopkanyň üstüne basylsa - hemme zat ýene gaýtalanar.

Aşakdaky kody işlediň we buna göz ýetiriň (zzz klassy kursiw bilen belläp görkezýär, toggleClass-yň beýleki klasslaryň işlemegine päsgel bermeýändigini görkezmek üçin):

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

Birinji basgyçdan soň HTML kody şeýle görüner (red klassy goşular):

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

Ikinji basgyçdan soň bolsa şeýle (red klassy ýogalar):

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

Ähli li elementlere www klassy ýok bolsa goşuň, bar bolsa aýyryň.