Классы

Веб-программирование --- jQuery --- Классы

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Несмотря на то что для работы с классами можно использовать общие методы, предназначенные для работы с атрибутами, в jQuery предусмотрены намного более удобные методы, специально предназначенные для этой цели. Их краткое описание приведено в таблице ниже:

Можно добавлять классы в элементы, используя метод addClass(), или удалять классы, используя метод removeClass(), а также проверять принадлежность элемента определенному классу, используя метод hasClass(). Пример использования этих методов приведен ниже:

<style type="text/css">
    img.redBorder {border: thick solid red}
    img.blueBorder {border: thick solid blue}
</style>
<script>	
$(function() {
                
    $('img').addClass("redBorder");
    $('img:even').removeClass("redBorder").addClass("blueBorder");
    
    console.log("Все элементы: " + $('img').hasClass('redBorder'));
    $('img').each(function(index, elem) {
        console.log("Элемент: " + $(elem).hasClass('redBorder') + " " + elem.src);    
    });
	
});
</script>

В начале этого фрагмента кода помещен элемент 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");
         
    $("<button>Переключить</button>").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");
         
    $("<button>Переключить</button>").appendTo("#buttonDiv").click(doToggle);
    
    function doToggle(e) {
        $('img').toggleClass("redBorder blueBorder");
        e.preventDefault();
    };
	
});

В этом примере для всех элементов img осуществляется переключение классов redBorder и blueBorder. Теперь при щелчке на кнопке будут меняться цвета всех рамок.

Переключение всех классов

Можно переключить сразу все классы, которым принадлежит набор элементов, вызвав метод toggleClass() без аргументов. Это более "умный" прием, поскольку jQuery сохраняет информацию о переключаемых классах, так что они присваиваются и удаляются корректно. Пример использования этой методики приведен ниже:

<style type="text/css">
    img.redBorder {border: thick solid red}
    img.blueBorder {border: thick solid blue}
	.bigFont {font-size:1.5em}
</style>
<script>	
$(function() {
                
    $('img').filter(':odd').addClass("redBorder").end()
        .filter(':even').addClass("blueBorder");
	$('label').addClass("bigFont");
         
    $("<button>Переключить</button>").appendTo("#buttonDiv").click(doToggle);
    
    function doToggle(e) {
        $('img, label').toggleClass();
        e.preventDefault();
    };
	
});
</script>

В этом примере метод addClass() используется для добавления классов во все элементы img и label. После щелчка на кнопке "Переключить" осуществляется выбор указанных элементов и вызывается метод toggleClass() без аргументов.

После первого щелчка на кнопке из выделенных элементов удаляются все классы, однако jQuery запоминает, какие классы были удалены, и поэтому может присвоить их элементам заново после выполнения повторного щелчка.

Одностороннее переключение классов

Процессом переключения классов (т.е. их добавлением, если их нет, или удалением, если они есть) можно управлять, передавая методу toggleClass() логическое (булево) значение в качестве аргумента. Если передается значение false, то классы будут только удаляться, если true — только добавляться. Того же эффекта можно добиться совместным использованием методов addClass() и removeClass(), и поэтому данной возможностью я пользуюсь относительно редко.

Динамическое переключение классов

Решение о том, на какие классы должно воздействовать переключение, может приниматься "на лету" за счет передачи методу toggleClass() функции обратного вызова. Простой пример того, как это можно сделать, приведен ниже:

$(function() {
                
    $('img').addClass("redBorder");
    $('img:even').addClass("blueBorder");
         
    $("<button>Переключить</button>").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 текущего элемента. Результатом, который возвращает функция, является список имен классов, переключение которых следует выполнить. Если переключение классов не требуется, функция должна возвратить пустую строку (отсутствие возвращаемого функцией результата для какого-либо элемента приводит к переключению всех его классов).