Работа з метадам 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>