Варьирование наличия класса
.toggleClass()
Добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть). Функция имеет несколько вариантов использования:
.toggleClass("class1 class2 ..."):jQuery1.0
соответствует поведению описанному выше.
.toggleClass("class1 class2 ...", switch ):jQuery1.3
только добавляет или только удаляет классы в зависимости от параметра switch. Параметр имеет тип boolean. true — в случае добавления класса(ов), false — иначе.
.toggleClass( function(index, class) ,[switch] ):jQuery1.4
"переключает" классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку, с перечислением классов через пробел. Функция вызывается для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, class — текущий класс(ы) элемента. Параметр switch играет такую же роль, как и в предыдущем случае.
Примеры использования:
$("#content").toggleClass("clName1 clName2") | "переключит" классы clName1 и clName2 у элемента с идентификатором content |
$(".content").toggleClass("clName1 clName2", false) | удалит классы clName1 и clName2 (если, конечно, такие классы имеются) у элементов с классом content |
В действии
Пример демонстрирует работу функции toggleClass с пользовательской функцией в качестве параметра. "Переключим" классы colored у всех элементов списка, кроме элемента, с индексом 2.
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ #list{ width:260px; } .item{ width: 250px; height: 20px; margin: 2px; padding: 3px; background-color: #eee; list-style-type:none; } .colored{ background-color: #cceecc; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item colored"~gt~0. Меркурий ~lt~/li ~gt~ ~lt~li class="item colored"~gt~1. Венера ~lt~/li ~gt~ ~lt~li class="item colored"~gt~2. Земля ~lt~/li ~gt~ ~lt~li class="item colored"~gt~3. Марс ~lt~/li ~gt~ ~lt~li class="item colored"~gt~4. Юпитер ~lt~/li ~gt~ ~lt~li class="item colored"~gt~5. Сатрурн ~lt~/li ~gt~ ~lt~li class="item colored"~gt~7. Уран ~lt~/li ~gt~ ~lt~li class="item colored"~gt~8. Нептун ~lt~/li ~gt~ ~lt~li class="item colored"~gt~9. Плутон ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").toggleClass( function(index){ if(index != 2) return "colored"; else return ""; } ); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
См. также
- .addClass( ) — добавление класса
- .removeClass( ) — удаление класса