jQuery-da toggleClass metodi bilan ishlash

Shuningdek, foydali toggleClass metodi mavjud bo‘lib, u ko‘rsatilgan klass yo‘q bo‘lsa qo‘shadi, mavjud bo‘lsa olib tashlaydi. U, sahifa elementiga bir xil tugmani bosilganda davriy o‘zgarishlar sodir bo‘lishi uchun kerak bo‘lishi mumkin.

Keling, ushbu metodni misolda ko‘rib chiqaylik. Faraz qilaylik, bizda quyidagi CSS uslublari mavjud:

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

Shuningdek, zzz klassiga ega abzat mavjud:

<p class="zzz" id="test">matn</p>
<button>bosing</button>

Keling, masalan, tugmani birinchi marta bosilganda, elementga qizil rang qo‘shadigan red klassi qo‘shilsin, qayta bosilganda esa - bu klass olib tashlansin va qizil rang yo‘qolsin. yana tugmani bossangiz - hammasi yana takrorlanadi.

Quyidagi kodni ishga tushirib, buning ishlashini ko‘ring (zzz klassi kursiv bilan ajratib ko‘rsatadi, shuning uchun toggleClass boshqa klasslarning ishlashiga xalaqit bermasligini ko‘rsatish uchun):

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

Birinchi bosilgandan so‘ng HTML kod quyidagicha ko‘rinadi (red klassi qo‘shiladi):

<p class="zzz red" id="test">matn</p>
<button>bosing</button>

Ikkinchi bosilgandan so‘ng esa - quyidagicha (red klassi yo‘qoladi):

<p class="zzz" id="test">matn</p>
<button>bosing</button>

Barcha li elementlarga www klassini yo‘q bo‘lsa qo‘shing, mavjud bo‘lsa olib tashlang.