toggleClass მეთოდთან მუშაობა jQuery-ში

არსებობს ასევე სასარგებლო მეთოდი 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 კლასი, თუ ის არ არის, და წაშალეთ, თუ არის.