Darbība ar toggleClass metodi jQuery

Pastāv arī noderīga metode toggleClass, kas pievienos norādīto klasi, ja tāds nav, un noņems to, ja tas ir. Tas var būt nepieciešams, lai, noklikšķinot uz vienas un tās pašas pogas, ar lapas elementu notiktu periodiskas izmaiņas.

Apskatīsim šo metodi ar piemēru. Pieņemsim, ka mums ir šādi CSS stili:

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

Ir arī rindkopa ar klasi zzz:

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

Piemēram, darīsim tā, lai pie pirmā nospiežot pogu, elementam tiktu pievienota klase red, kas pievieno sarkano krāsu, un atkārtoti nospiežot - šī klase tiks noņemta un sarkanā krāsa pazudīs. Ja atkal nospiežat pogu - viss atkārtosies vēlreiz.

Mēģiniet palaist šādu kodu un pārliecinieties par to (klase zzz izceļ kursīvu, lai parādītu, ka toggleClass netraucēs strādāt citām klasēm):

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

Pēc pirmā nospiešanas HTML kods izskatīsies šādi (tiks pievienota klase red):

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

Un pēc otrā nospiešanas - šādi (pazudīs klase red):

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

Pievienojiet visiem li klasi www, ja tāda nav, un noņemiet, ja ir.