Praca z metodą toggleClass w jQuery

Istnieje również przydatna metoda toggleClass, która doda określoną klasę, jeśli jej nie ma, i usunie ją, jeśli jest. Może się przydać, aby po kliknięciu na ten sam przycisk z elementem strony zachodziły okresowe zmiany.

Rozważmy tę metodę na przykładzie. Załóżmy, że mamy następujące style CSS:

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

Jest też akapit z klasą zzz:

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

Zróbmy na przykład tak, aby przy pierwszym naciśnięciu przycisku, elementowi została dodana klasa red, która dodaje czerwony kolor, a przy ponownym - ta klasa została usunięta i czerwony kolor zniknął. Jeśli ponownie naciśniesz przycisk - wszystko się powtórzy.

Spróbuj uruchomić następujący kod i przekonaj się o tym (klasa zzz podkreśla kursywą, aby pokazać, że toggleClass nie będzie przeszkadzał w działaniu innych klas):

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

Po pierwszym naciśnięciu kod HTML będzie wyglądać tak (zostanie dodana klasa red):

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

A po drugim naciśnięciu - tak (zniknie klasa red):

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