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

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

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

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

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

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

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

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

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

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

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

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

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