Метод toggleClass

Метод .toggleClass() чередует класс: если его нет - добавит, если есть - удалит.

См. также методы addClass, removeClass, hasClass.

См. также урок основы работы с jQuery для более полного понимания.

См. также JavaScript свойство classList, с помощью которого можно чередовать класс на чистом JavaScript.

Синтаксис

Один класс:

$(селектор).addClass(имя класса)

Несколько классов:

$(селектор).addClass('класс1 класс2 класс3...')

Дополнительно

Начиная с jQuery1.4 метод addClass может применить заданную функцию к каждому элементу в наборе.

При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущий текст элемента:

$(селектор).addClass(function(номер в наборе, текущие классы элемента))

Имена переменных в функции могут быть любыми.

К примеру, если для первого параметра 'номер в наборе' мы дадим имя index - тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.

Аналогично, если для второго параметра 'текущие классы элемента' дать, к примеру, имя className - тогда внутри нашей функции будет доступна переменная className, в которой будут лежать классы того элемента, который функция обрабатывает в данный момент времени:

$(селектор).addClass(function(index, className){
	//тут доступны переменные index и className
})

Атрибут class каждого элемента поменяется на тот, который вернет функция конкретно для этого элемента.

Примеры

Пример

У нашего абзаца уже есть два класса. Давайте добавим ему еще и класс www:

<p id="test" class="eee ggg">привет</p>

$('#test').toggleClass('www');

<p id="test" class="eee ggg www">привет</p>

Пример

А теперь класс www уже есть в элементе - давайте его удалим:

<p id="test" class="eee ggg www">привет</p>

$('#test').toggleClass('www');

<p id="test" class="eee ggg">привет</p>