Добавление класса элементу в jQuery
Напоминаю, что в атрибуте class в HTML коде можно писать несколько классов через пробел.
Представим себе такую ситуацию — вы хотите добавить новый класс к имеющимся, не затерев их при этом. В этом случае, просто взять и сделать .attr(‘class’, ‘new-class’) не получится (воспользовавшись методом attr ) — вы затрете те классы, которые уже есть в атрибуте.
Можно, конечно же, сначала считать классы, которые там есть, затем добавить к ним наш класс через пробел и записать все обратно в атрибут, но есть способ проще — в jQuery для таких вещей предусмотрен метод addClass .
Метод addClass позволяет добавить класс элементу (или элементам), не затерев при этом другие классы. Класс, который вы хотите добавить в элемент, принимается параметром этого метода.
В следующем примере у нас есть элемент с двумя классами — class=»www zzz» :
Мы можем добавить к нему еще и третий класс — kkk . В результате содержимое атрибута станет таким — class=»www zzz kkk» :
$(‘#test’).addClass(‘kkk’);
HTML код станет выглядеть так:
Добавьте всем li класс test .
Добавление и удаление класса в Jquery
Для добавления классов к элементу в jquery есть функция addClass(), работа её очень простая, рассмотрим на примере:
Добавление класса
$("#block").addClass("class"); $(".block").addClass("class"); Мы к элементу block добавляем класс class. Мы можем добавлять классы, как по id, так и по классу.
Есть возможность добавлять сразу несколько классов:
$("#block").addClass("class1 class2"); Рассмотрим пример. Создадим белый блок с чёрной рамкой и добавим к нему класс, который окрасит его в красный цвет.
#block < width: 50px; height: 50px; border: 1px solid #000; >.red
Удаление класса
Для удаления класса в jquery есть функция removeClass, которая работает аналогично с классом выше, рассмотрим на примере:
$("#block").removeClass("class"); $(".block").removeClass("class"); Удаляем классы у элемента block, также можно удалять несколько классов:
$("#block").removeClass("class1 class2"); Есть возможность удалить все классы, для этого функции мы не передаём параметров:
$("#block").removeClass(); Пример работы. Удалим у нашего блока класс, который делает его красным цветом:
#block < width: 50px; height: 50px; border: 1px solid #000; >.red
Классы
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Несмотря на то что для работы с классами можно использовать общие методы, предназначенные для работы с атрибутами, в jQuery предусмотрены намного более удобные методы, специально предназначенные для этой цели. Их краткое описание приведено в таблице ниже:
| Метод | Описание |
|---|---|
| addClass(имя имя . ) | Добавляет один или несколько классов с указанными именами во все элементы, содержащиеся в объекте jQuery |
| addClass(функция) | Добавляет классы, список которых возвращает указанная функция, во все элементы, содержащиеся в объекте jQuery |
| hasClass(имя) | Возвращает true, если хотя бы один из элементов, содержащихся в объекте jQuery, принадлежит указанному классу |
| removeClass(имя имя . ) | Удаляет один или несколько классов с указанными именами из всех элементов, содержащихся в объекте jQuery |
| removeClass(функция) | Удаляет классы, список которых возвращает указанная функция, из всех элементов, содержащихся в объекте jQuery |
| toggleClass() | Переключает все классы, которым принадлежат элементы, содержащиеся в объекте jQuery |
| toggleClass(логическое_значение) | Осуществляет одностороннее переключение всех классов, которым принадлежат элементы, содержащиеся в объекте jQuery |
| toggleClass(имя), toggleClass(имя имя . ) | Переключает один или несколько классов с указанными именами для всех элементов, содержащихся в объекте jQuery |
| toggleClass(имя, логическое_ значение) | Осуществляет одностороннее переключение класса с указанным именем для всех элементов, содержащихся в объекте jQuery |
| toggleClass(функция, логическое значение) | Динамически переключает классы для всех элементов, содержащихся в объекте jQuery |
Можно добавлять классы в элементы, используя метод addClass(), или удалять классы, используя метод removeClass(), а также проверять принадлежность элемента определенному классу, используя метод hasClass(). Пример использования этих методов приведен ниже:
img.redBorder img.blueBorder В начале этого фрагмента кода помещен элемент style, содержащий определения двух стилей, применение которых зависит от принадлежности элемента определенному классу. Привлекать классы для управления CSS вовсе не обязательно, однако их использование позволяет упростить демонстрацию эффектов анимации.
Сценарий начинается с выбора всех элементов img в документе и присвоения им класса redBorder с помощью метода addClass(). Затем мы выбираем четные элементы img, удаляем их из класса redBorder и присваиваем им класс blueBorder, используя метод removeClass(). Обратите внимание, что метод addClass() не удаляет существующие классы из элементов, а лишь добавляет новые классы в дополнение к тем, которые были применены к элементам ранее.
Наконец, мы используем метод hasClass() для проверки на принадлежность классу redBorder как всего выбранного набора в целом (этот метод возвращает true, если хотя бы один элемент набора имеет указанный класс), так и каждого элемента img по отдельности. Вид страницы в окне браузера приведен на рисунке:
При этом на консоль выводится следующий результат:
Добавление и удаление классов с помощью функции
Классы можно динамически добавлять или удалять из набора элементов, передавая методам addClass() и removeClass() функцию в качестве аргумента. Пример использования функции совместно с методом addClass() приведен ниже:
$(function() < $('img').addClass(function(index, currentClasses) < if (index % 2 == 0) return "blueBorder"; else return 'redBorder'; >); >);Аргументами функции являются индекс элемента в наборе выбранных элементов, а также текущий набор классов, членом которых является данный элемент. Как и в случае других аналогичных функций, переменная this ссылается на объект HTMLElement текущего обрабатываемого элемента. Функция должна возвращать класс, к которому требуется присоединить элемент. В данном примере решение о том, какой именно из классов следует назначить элементу — redBorder или blueBorder, — принимается на основании значения аргумента index. Вид страницы в окне браузера будет тем же, что и на предыдущем рисунке.
Переключение отдельного класса
В своей простейшей форме переключение класса означает добавление указанного класса, если элемент не имеет данного класса, или удаление класса, если элемент имеет данный класс. Это достигается передачей методу toggleClass() имени класса, как показано в примере ниже:
$(function() < $('img').filter(':odd').addClass("redBorder").end() .filter(':even').addClass("blueBorder"); $("").appendTo("#buttonDiv").click(doToggle); function doToggle(e) < $('img').toggleClass("redBorder"); e.preventDefault(); >; >);Этот сценарий начинается с присвоения класса redBorder нечетным элементам img, а класса blueBorder — четным. Затем мы создаем элемент button и присоединяем его к элементу с атрибутом id, равным buttonDiv. В результате этого новая кнопка располагается рядом с уже имеющейся на странице кнопкой «Заказать». Функция, которую jQuery должна вызывать после щелчка на кнопке, задается с помощью метода click().
Ключевая инструкция функции doToggle(), которая вызывается после щелчка на кнопке, выглядит так:
$('img').toggleClass("redBorder"); Она выбирает все элементы img в документе и управляет переключением класса redBorder. Аргумент функции doToggle() и вызов метода preventDefault() интереса для нас пока что не представляют.
Теперь, при переключении, у элементов, заключенных в красную рамку, рамка исчезает, а элементы, которые были первоначально заключены в синюю рамку, таковыми и остаются. Суть происходящего состоит в том, что jQuery, как и следовало ожидать, удаляет класс redBorder из нечетных элементов img и добавляет его в четные элементы, но элемент, к которому добавляется класс redBorder, является также членом класса blueBorder. Стиль blueBorder определен в элементе style после стиля redBorder, откуда следует, что значения его свойств имеет более высокий приоритет. Поэтому переключение классов работает, но при этом должны учитываться также некоторые тонкости функционирования CSS.
Переключение одновременно нескольких классов
Если методу toggleClass передается список имен классов, разделенных пробелами, то соответствующее переключение будет выполнено для каждого из элементов выбранного набора. Один из примеров того, как можно сделать, приведен ниже:
$(function() < $('img').filter(':odd').addClass("redBorder").end() .filter(':even').addClass("blueBorder"); $("").appendTo("#buttonDiv").click(doToggle); function doToggle(e) < $('img').toggleClass("redBorder blueBorder"); e.preventDefault(); >; >);В этом примере для всех элементов img осуществляется переключение классов redBorder и blueBorder. Теперь при щелчке на кнопке будут меняться цвета всех рамок.
Переключение всех классов
Можно переключить сразу все классы, которым принадлежит набор элементов, вызвав метод toggleClass() без аргументов. Это более «умный» прием, поскольку jQuery сохраняет информацию о переключаемых классах, так что они присваиваются и удаляются корректно. Пример использования этой методики приведен ниже:
img.redBorder img.blueBorder .bigFont В этом примере метод addClass() используется для добавления классов во все элементы img и label. После щелчка на кнопке «Переключить» осуществляется выбор указанных элементов и вызывается метод toggleClass() без аргументов.
После первого щелчка на кнопке из выделенных элементов удаляются все классы, однако jQuery запоминает, какие классы были удалены, и поэтому может присвоить их элементам заново после выполнения повторного щелчка.
Одностороннее переключение классов
Процессом переключения классов (т.е. их добавлением, если их нет, или удалением, если они есть) можно управлять, передавая методу toggleClass() логическое (булево) значение в качестве аргумента. Если передается значение false, то классы будут только удаляться, если true — только добавляться. Того же эффекта можно добиться совместным использованием методов addClass() и removeClass(), и поэтому данной возможностью я пользуюсь относительно редко.
Динамическое переключение классов
Решение о том, на какие классы должно воздействовать переключение, может приниматься «на лету» за счет передачи методу toggleClass() функции обратного вызова. Простой пример того, как это можно сделать, приведен ниже:
$(function() < $('img').addClass("redBorder"); $('img:even').addClass("blueBorder"); $("").appendTo("#buttonDiv").click(doToggle); function doToggle(e) < $('img').toggleClass(function(index, currentClasses) < if (index % 2 == 0) < return "blueBorder"; >else < return ""; >>); e.preventDefault(); >; >);Здесь класс redBorder применяется ко всем элементам img, а класс blueBorder — только к четным. Аргументами, которые передаются функции, являются индекс текущего обрабатываемого элемента и текущий набор классов, которым он принадлежит. Переменная this ссылается на объект HTMLElement текущего элемента. Результатом, который возвращает функция, является список имен классов, переключение которых следует выполнить. Если переключение классов не требуется, функция должна возвратить пустую строку (отсутствие возвращаемого функцией результата для какого-либо элемента приводит к переключению всех его классов).
Изменение атрибута «class» через jQuery (addClass, removeClass, hasClass)
В jQuery методы, которые приспособлены для работы с классами: addClass, removeClass, hasClass. Конечно, можно использовать метод attr для изменения классов, но он заменяет все существующие классы. Поэтому вместо attr лучше использовать методы, которые автоматически вычисляют какие классы уже есть и добавляют/убирают нужные/ненужные. Разберём их по порядку.
Добавление класса (addClass)
Приведём пример добавления класса с помощью метода addClass. Этому методу в качестве параметра передаётся название класса. Метод автоматически вычисляет есть ли у элемента такой класс и добавляет его, если ещё нет:
Как видно из примера, атрибута «class» ещё нет у элемента «div». Но после применения метода «addClass» он будет создан и HTML код страницы изменится на:
Добавим сразу второй класса, чтобы продемонстрировать, что существующие классы не затираются, как это происходит при использовании attr:
При выполнении такого кода получится HTML код:
Удаление класса (removeClass)
Метод «removeClass» удаляет определённый класс у элемента, но оставляет остальные. Для демонстрации возьмём HTML код из предыдущего примера и попробуем удалить определённый класс:
При выполнении такого кода получится HTML код:
Удален только один класс «cheese», который запрашивался.
Включить/выключить класс (toggleClass)
Существует метод «toggleClass», который работает как «addClass» и «removeClass» одновременно. Если класс существует, то он будет убран. А если класса нет, то он будет добавлен. Такая логика хорошо применима к различным кнопкам-тумблерам с двумя позициями «вкл/выкл». С помощью этого метода их легко запрограммировать. Попробуем метод на практике:
Поскольку класс «cheese» уже есть, то он будет убран. А класс «milk» будет добавлен, потому что его нет. При выполнении такого кода получится HTML код:
Проверка существования класса (hasClass)
В наборе jQuery есть несколько удобных методов для работы с классами. Один из ни «hasClass», который возвращает «true» или «false» в зависимости от того, есть ли у элемента класс. Этот метод часто использвуется внутри условия «if», поэтому приведём пример именно с ним: