Коркарди методҳои toggleClass дар jQuery

Усули муфиди toggleClass ҳам вуҷуд дорад, ки синфи мушаххасшударо илова мекунад, агар он вуҷуд надошта бошад, ва онро хориҷ мекунад агар вуҷуд дошта бошад. Он метавонад зарур бошад, то ки бо клик кардан бар як ҳамон тугма бо унсури саҳифа тағйироти даврӣ рух диҳад.

Биёед ин усулро бо мисол баррасӣ кунем. Фарз кунем ки мо стилҳои CSS-и зеринро дорем:

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

Ҳамчунин як абзас бо синфи zzz вуҷуд дорад:

<p class="zzz" id="test">матн</p>
<button>клик</button>

Биёед, барои намуна, чунин кунем, ки дар аввалин фишор додан ба тугма, ба унсур синфи red илова карда мешавад, ки рангоби сурхро илова мекунад, ва дар фишор додани такрорӣ - ин синф хориҷ карда мешавад ва рангоби сурх нобуд мешавад. Агар боз ба тугма фишор диҳем - ҳама чиз боз такрор мешавад.

Кӯшиш кунед коди зеринро оғоз кунед ва худ боварӣ ҳосил кунед (синфи zzz бо курсив қайд карда шудааст, то нишон диҳад, ки toggleClass ба дигар синфҳо коре кардан монеъ намешавад):

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

Пас аз аввалин фишор додан, коди HTML чунин намуд пайдо мекунад (синфи red илова мешавад):

<p class="zzz red" id="test">матн</p>
<button>клик</button>

Ва пас аз фишори дуюм - чунин (синфи red нобуд мешавад):

<p class="zzz" id="test">матн</p>
<button>клик</button>

Ба ҳамаи li синфи www илова кунед, агар он вуҷуд надошта бошад, ва хориҷ кунед, агар вуҷуд дошта бошад.