Как в 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. О его применении вы можете посмотреть здесь.

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

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

Комментариев: 2
  1. wdtime

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

    1. Михаил (автор)

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: