jQuery да toggleClass метода билан ишлаш

Шунингдек, фойдали метод мавжуд toggleClass, у кўрсатилган классни агар мавжуд бўлмаса қўшади, ва агар мавжуд бўлса уни олиб ташлайди. У битта тугмачани босганда саҳифа элементи билан Davriy ўзгаришлар юз бериши учун керак бўлиши мумкин.

Келинг, бу методни мисолда кўриб чиқайлик. Бизда куйидаги CSS Uslublari бор деб фараз қилайлик:

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

Шунингдек, zzz класси билан абзац бор:

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

Келинг, масалан, шундай килайлик, тугмачани биринчи марта босганда, элементга қизил рангни қўшадиган red класси қўшилсин, ва қайта босилганда - бу класс олиб ташлансин ва қизил ранг йўқолади. Агар яна тугмачани боссангиз - ҳаммаси яна такрорланади.

Куйидаги кодни ишга тушириб, bunga ишонч ҳосил қилинг (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 классини агар мавжуд бўлмаса қўшинг, ва агар мавжуд бўлса уни олиб ташланг.