8:38
Автор: Рубрика: JS/jQuery 2 комментария

Как в jquery удалить класс или добавить его

Приветствую вас, дорогие читатели. Сегодня я предлагаю подробно рассмотреть важную часть взаимодействия jquery и css. В частности, работу с классами. Сегодня вы узнаете, как в jquery удалить класс, добавить его или переключить. Обо всем этом по порядку.

Удаление класса

Допустим, в html разметке у нас есть блок с двумя классами. Первый задает элементу основные параметры, такие, как размеры. Класс b1 отвечает исключительно за фоновых цвет элемента.

<div class = "block b1"></div>
.block{
border: 3px solid black;
width: 200px;
height: 130px;
margin: 20px
}
.b1{
background: green;
}

Сделаем так, чтобы при клике по блоку у него убирался класс b1 и соответственно, фоновый цвет исчезал. Напишем функцию, чтобы при загрузке страницы к нашему элементы привязывалось событие “клик” при котором к элементу применится функция del.

$(document).ready(function(){
$(".block").bind('click', del);
});

Метод bind позволяет связать элемент и событие для него. Таким образом, больше не обязательно писать в html-коде атрибуты вроде onclick, их можно задать в самом файле со скриптами.
Остается написать саму функцию:

function del(){
$(".block").removeClass("b1");
}

удаляем класс
Мы обратились к элементу по его первому классу и удаляем его второй. Таким образом, после клика по нему его фон удалится. Тут все понятно, я хотел бы обратить ваше внимание лишь на один момент. В круглых скобках у метода removeClass() нужно указать имя нужного класса, писать его нужно без точки, потому что этот метод итак выбирает именно класс и ничего больше.

Как в jquery добавить класс

Соответственно, противоположная операция и для нее существует метод addClass(). Давайте сделаем так, чтобы при двойном клике по блоку у него скруглялись углы.

$(document).ready(function(){
$(".block").bind('dblclick', add);
});

После загрузки элемент block получит событие двойной клик и выполнение функции add при этом. Заметьте, что имя функции не нужно записывать в кавычках.

function add(){
$(".block").addClass("radius");
}

Сам класс добавляет следующее свойство:

.radius{
border-radius: 50%;
}

23
Кликаем два раза и убеждаемся, что элемент скругляется. Если вы хотите, чтобы изменение стилей происходило не резко, можно просто в css задать нашему элементу свойство transition. О его применении вы можете посмотреть здесь.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Переключение класса

Ну и наконец, есть еще метод toogleClass(). Он действует так – если указанный стилевой класс присутствует у элемента, он его удаляет, а если не присутствует, он наоборот, его добавляет. Вот такой вот универсальный переключатель получается.

2 комментария
  • wdtime

    jQuery toggleClass — переключатель классов — http://wdtime.ru/jquery/jquery-toggleclass-pereklyuchatel-klassov

    2016-09-18 в 9:28 | Ответить
    • Михаил

      Вот это дополнение будет нелишним, остальное потер

      2016-09-23 в 1:31 | Ответить