На разрабатываемой веб-странице подразумевается активная работа с классами элементов.
На разрабатываемой веб-странице подразумевается активная работа с классами элементов. Необходимо добавлять, удалять и переключать классы, а также выполнять какие-либо действия в зависимости от того, присутствует ли у элемента определенный класс.
Решение
Для решения этих задач используем имеющиеся в арсенале библиотеки jQuery методы: addClass(), removeClass(), toggleClass() и hasClass() (листинг 2.2.1).
Листинг 2.2.1. Использование методов addClass(), removeClass(), toggleClass() и hasClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-2-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p { border:1px dotted #ccc; }
.t
est { background-color:#369; color:#fff; }
</style>
<script type="text/javascript">
$(function(){
$("#add").click(function(){
$("p").addClass("test");
});
$("#remove").click(function(){
$("p").removeClass("test");
});
$("#toggle").click(function(){
$("p").toggleClass("test");
});
$("#has").click(function(){ alert($("p:first").hasClass("test"));
});
});
</script>
</head>
<body>
<p>Параграф №1</p>
<p>Параграф №2</p>
<p>Параграф №3</p>
<button id="add">Добавить класс</button>
<button id="remove">Удалить класс</button>
<button id="toggle">Переключить класс</button>
<button id="has">Проверить класс</button>
</body>
</html>
Обсуждение
В листинге 2.2.1 есть три "подопытных" параграфа, оформление которых задано с помощью CSS-правила для элементов p, и четыре кнопки, с помощью которых мы сможем добавлять, удалять, переключать и проверять присутствие класса с именем test у элементов p.
Посмотрите JavaScript-код. Он очень простой — с каждой из кнопок связан обработчик события click, но callback-функции для каждой кнопки, конечно, вызываются разные. Так, щелчок по кнопке Добавить класс приведет к тому, что с помощью метода addClass() всем элементам p будет добавлен класс test, — изменится цвет фона и шрифта всех параграфов. Щелчок по кнопке Удалить класс — и элементы p возвращаются в свое первоначальное состояние. Щелкая по кнопке Переключить класс и вызывая таким образом метод toggleClass(), мы просто каждым следующим нажатием добавляем и удаляем класс test. При щелчке на кнопке Проверить класс вызываем метод hasClass(), который вернет true при наличии у выбранного элемента класса, с указанным именем, и false — в противном случае.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Анализ большого набора данных (0)
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)