Delo z metodo toggleClass v jQuery

Obstaja tudi uporabna metoda toggleClass, ki bo dodala določen razred, če ga ni, in ga odstranila, če je prisoten. Lahko je potrebna, da ob kliku na isti gumb z elementom strani pride do periodičnih sprememb.

Oglejmo si to metodo na primeru. Naj imamo naslednje CSS sloge:

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

Obstaja tudi odstavek z razredom zzz:

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

Naredimo na primer tako, da ob prvim pritisku na gumb, se elementu doda razred red, ki doda rdečo barvo, ob ponovnem pritisku pa se ta razred odstrani in rdeča barva izgine. Če ponovno pritisnemo na gumb - se vse ponovi.

Poskusite zagnati naslednjo kodo in se prepričajte v tem (razred zzz označuje ležeče, da pokaže, da toggleClass ne bo ovirala drugih razredov):

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

Po prvem pritisku bo HTML koda videti takole (doda se razred red):

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

Po drugem pritisku pa takole (izgine razred red):

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

Dodajte vsem li razred www, če ga ni, in odstranite, če je prisoten.