jQuery-ում toggleClass մեթոդի հետ աշխատանք

Գոյություն ունի նաև օգտակար toggleClass մեթոդը, որը կավելացնի նշված դասը, եթե այն չկա, և կհեռացնի այն, եթե այն կա: Այն կարող է անհրաժեշտ լինել, որպեսզի նույն կոճակի վրա կտտացնելիս էջի տարրի հետ տեղի ունենան պարբերական փոփոխություններ:

Դիտարկենք այս մեթոդը օրինակով: Ենթադրենք ունենք հետևյալ CSS ոճերը:

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

Նաև կա zzz դասով պարբերություն:

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

Օրինակ, եկեք անենք այնպես, որ կոճակի վրա առաջին սեղմում时 տարրին ավելացվի red դասը, որը ավելացնում է կարմիր գույն, իսկ կրկնակի սեղմում时 - այդ դասը կ հեռացվի, և կարմիր գույնը կվերանա: Եթե դարձյալ սեղմենք կոճակի վրա - ամեն ինչ կկրկնվի:

Փորձեք գործարկել հետևյալ կոդը և համոզվեք դրանում (zzz դասը նշում է շեղագիր, որպեսզի ցույց տա, որ toggleClass-ը չի խանգարի այլ դասերի աշխատանքին):

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

Առաջին սեղմումից հետո HTML կոդը կստանա հետևյալ տեսքը (կավելանա red դասը):

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

Իսկ երկրորդ սեղմումից հետո - այսպես (կվերանա red դասը):

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

Բոլոր li տարրերին ավելացրեք www դասը, եթե այն չկա, և հեռացրեք, եթե կա: