Kufanya Kazi na Njia toggleClass katika jQuery

Pia kuna njia muhimu toggleClass, ambayo itaongeza darasa maalum, kama halipo, na kuiondoa ikiwa ipo. Inaweza kuhitajika, ili kwa kubofya kitufe kimoja na kipengele cha ukurisa kinatokea mabadiliko ya mara kwa mara.

Tuchunguze njia hii kwa mfano. Hebu tuwe na mitindo ifuatayo ya CSS:

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

Pia kuna aya yenye darasa zzz:

<p class="zzz" id="test">nakala</p>
<button>bofya</button>

Wacha, kwa mfano, tufanye hivi, ili wakati wa kubofya kwanza kwenye kitufe, kipengele kitaongezewa darasa red, ambalo linaongeza rangi nyekundu, na wakati wa kubofya tena - darasa hilo litaondolewa na rangi nyekundu itapotea. Ikiwa utabofya tena kwenye kitufe - yote yatarudiwa tena.

Jaribu kuanzisha msimbo ufuatao na uhakikishe katika hili (darasa zzz linaonyesha herufi italic, kuonyesha kwamba toggleClass haita pinga madarasa mengine kufanya kazi):

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

Baada ya kubofya kwa mara ya kwanza msimbo wa HTML utaonekana hivi (darasa red litaongezwa):

<p class="zzz red" id="test">nakala</p>
<button>bofya</button>

Na baada ya kubofya kwa mara ya pili - hivi (darasa red litapotea):

<p class="zzz" id="test">nakala</p>
<button>bofya</button>

Weka darasa www kwa li zote, ikiwa halipo, na uiondoe, ikiwa ipo.