Punimi me metodën toggleClass në jQuery

Ekziston gjithashtu një metodë e dobishme toggleClass, që do të shtojë klasën e specifikuar, nëse ajo nuk ekziston, dhe do ta heqë atë nëse ekziston. Mund të jetë e nevojshme, në mënyrë që me një klikim në të njëjtën buton me një element të faqes të ndodhin ndryshime periodike.

Le ta shqyrtojmë këtë metodë me një shembull. Le të themi se kemi stilet CSS të mëposhtme:

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

Gjithashtu ka një paragraf me klasën zzz:

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

Le të bëjmë, për shembull, që gjatë shtypjes së parë në buton, elementit t'i shtohet klasa red, e cila i shton ngjyrën e kuqe, dhe gjatë shtypjes së dytë - kjo klasë do të hiqet dhe ngjyra e kuqe do të zhduket. Nëse shtypet përsëri në buton - gjithçka do të përsëritet përsëri.

Provoni të ekzekutoni kodin e mëposhtëm dhe binduni në këtë (klasa zzz thekson me shkrim italic, për të treguar se toggleClass nuk do të ndërhyjë në funksionimin e klasave të tjera):

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

Pas shtypjes së parë, kodi HTML do të duket kështu (do të shtohet klasa red):

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

Pas shtypjes së dytë - kështu (do të zhduket klasa red):

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

Shtoni të gjitha li klasën www, nëse ajo nuk ekziston, dhe hiqeni, nëse ekziston.