Práca s metódou toggleClass v jQuery

Existuje tiež užitočná metóda toggleClass, ktorá pridá zadanú triedu, ak neexistuje, a odstráni ju, ak existuje. Môže byť potrebná, aby pri kliknutí na rovnaké tlačidlo s prvkom stránky dochádzalo k periodickým zmenám.

Pozrime sa na túto metódu na príklade. Nech máme nasledujúce CSS štýly:

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

Tiež existuje odsek s triedou zzz:

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

Urobme napríklad to, aby pri prvom stlačení tlačidla, prvku pridala trieda red, ktorá pridáva červenú farbu, a pri opakovanom - táto trieda bude odstránená a červená farba zmizne. Ak znova stlačíte tlačidlo - všetko sa zopakuje znova.

Skúste spustiť nasledujúci kód a presvedčte sa o tom (trieda zzz zvýrazňuje kurzívou, aby ukázala, že toggleClass nebude prekážať iným triedam pracovať):

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

Po prvom stlačení HTML kód bude vyzerať takto (pridá sa trieda red):

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

A po druhom stlačení - takto (zmizne trieda red):

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