Работа со методот toggleClass во jQuery

Постои и корисен метод toggleClass, кој ќе го додаде наведениот клас, доколку го нема, и ќе го отстрани доколку постои. Може да биде потребен, за со клик на едно исто копче со елементот на страната да се случат периодични промени.

Да го разгледаме овој метод на пример. Нека имаме следни CSS стилови:

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

Исто така има и пасус со класа zzz:

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

Да го направиме, на пример, ова, така што при првото притискање на копчето, на елементот ќе му се додаде класата red, која додава црвена боја, а при повторно - оваа класа ќе се отстрани и црвената боја ќе исчезне. Ако повторно се притисне на копчето - сè ќе се повтори.

Обидете се да го стартувате следниов код и убедете се во ова (класата 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>