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 классын кошуңуз, эгерде бар болсо, алып салыңыз.