Варьирование наличия класса

.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~

См. также

Ссылки

Поисковые ключи:
  • удаление - добавление класса у элементов
  • добавление - удаление класса у элементов
  • .toggleClass()
  • toggleClass()