Додайте та видаліть кілька класів у jQuery


135

Я намагаюся додати та видалити кілька класів із текстового поля, натискаючи різні перемикачі. Я не в змозі видалити небажані класи під час перемикання між різними кнопками перемикання.

Мій код для цього:

// For 1st radio button
if (actionUrl == "search-client-by-id") {
    $("#req").removeClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]")
             .addClass("validate[required,custom[onlyNumberSp]]");
}
// For 2nd radio button
else if (actionUrl == "search-client-by-name") {    
    $("#req").removeClass("validate[required,custom[onlyNumberSp]]")
             .addClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]");
}

Відповіді:


273

Можна розділити кілька класів з простором:

$("p").addClass("myClass yourClass");

http://api.jquery.com/addClass/


1
Я знайшов рішення для цього щоразу, коли використовую лише .removeClass () і мені не потрібно писати жодного імені класу у RemoveClass, щоб видалити всі додані класи та додати будь-який клас за вибором. Так, це працює ...!
Раман

3
Використання .removeClass () [без параметрів] видаляє всі класи об’єкта jQuery.
Ахмет

8

Додайте кілька класів:

$("p").addClass("class1 class2 class3");

або в каскаді:

$("p").addClass("class1").addClass("class2").addClass("class3");

Дуже схоже також на видалення більше класів:

$("p").removeClass("class1 class2 class3");

або в каскаді:

$("p").removeClass("class1").removeClass("class2").removeClass("class3");

так що ви хочете видалити клас із кількох $("p")?
віночок

у своєму прикладі я посилаюсь на всі пункти на сторінці, але це лише приклад. Ви можете ідентифікувати конкретний елемент за допомогою ідентифікатора чи іншого класу.
Andrea_dev

0

найпростіший спосіб додати ім'я класу за допомогою JavaScript. Це може бути корисно при .siblings()поганій поведінці.

document.getElementById('myId').className += ' active';

5
Ця відповідь не стосується питання, яке прямо задається jQuery.
кібербіт

1
І ви все одно повинні використовувати classList
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.