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

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

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

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

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

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

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

Куйидаги кодни ишга тушириб, bunga ишонч ҳосил қилинг (zzz класси курсив билан ажратиб кўрсатади, toggleClass бошқа классларнинг ишлашига халақит бермаслигини кўрсатиш учун):

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

Биринчи босилгандан кейин HTML код шундай кўринади (red класси қўшилади):

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

Ва иккинчи босилгандан кейин - шундай (red класси йўқолади):

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