Додавання і видалення вказаного класу вибраним елементам, визначення належності елемента до зазначеного класу
.hasClass('class') - має клас - повертає true, не має - false
.addClass('class') - додає клас до вибраного елементу
.removeClass('class') - видаляє клас для вибраного елементу
.removeClass() - видаляє всі класи для вибраного елементу
.toggleClass('class') - якщо є клас - видалить, якщо не має - добавить (інверсія)
.toggleClass('class','switch') - якщо switch=true - добавить клас, якщо ні - видалить
Приклади
<div class="dv2">.dv2 <img src="images/leaf.jpg" class="wcl"/> <img src="images/list.jpg" /> </div>
.wcl{
border: 3px solid red;
}
.dv2
1. Має клас чи не має (клікаємо по малюнку) -
2. Додає класс малюнку
3. Видаляє клас малюнку
4. Якщо є клас - видалить, якщо немає - добавить
5. Switch (для першого малюнку true, для другого false )
/*1*/$('.dv2 img').click (function(){
var hasCl= $(this).hasClass('wcl');
$('#inf1').text(hasCl);
});
/*2*/$('#btn1').click (function(){
$('.dv2 img').addClass('wcl');
});
/*3*/$('#btn2').click (function(){
$('.dv2 img').removeClass('wcl');
});
/*4*/$('#btn3').click (function(){
$('.dv2 img').toggleClass('wcl');
});
/*5*/$('#btn4').click (function(){
var switch1 = true;
var switch2 = false;
$('.dv2 img:first').toggleClass('wcl',switch1);
$('.dv2 img:last').toggleClass('wcl',switch2);
});
далі ✏