Переключатель классов

.toggleClass() — добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть).

Функция имеет несколько вариантов использования:

Добавляет или удаляет заданный в className класс(ы). Если классов несколько, то в строке className они должны быть разделены пробелами.

  • className — имя класса (или несколько имен, разделенных запятой).

Только добавляет или только удаляет классы в зависимости от параметра state.

  • className — имя класса (или несколько имен, разделенных запятой).
  • state — параметр имеет тип boolean. true — в случае добавления класса(ов), false — иначе.

Переключает классы, список которых возвращает заданная пользователем функция.

  • function(index, className, state ) — функция, которая возвращает строку с перечислением классов через пробел
    • index — позиция элемента в наборе;
    • className — имя класса (или несколько имен, разделенных запятой).
  • state — параметр имеет тип boolean. true — в случае добавления класса(ов), false — иначе.

Примеры использования. Первый вариант

Сначала при работе $( "div.tumble" ).toggleClass( "bounce" ) получим:

При втором использовании $( "div.tumble" ).toggleClass( "bounce" ) класс bounce будет удален.

При работе $( "div.tumble" ).toggleClass( "bounce spin" ) по аналогии с первым примером получим:

При повторном использовании оба класса будут удалены.

Примеры использования. Второй вариант

Во втором примере передадим аргумент addOrRemove, который в зависимости от условий будет принимать значение true или false:

это эквивалент:

Примеры использования. Третий вариант

В третьем примере напишем функцию для определения того, какой класс нужно добавить элементу:

Если у элемента <div class="foo">  есть класс bar, то добавим ему класс happy в другом случае sad.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *