jQuery addClass, removeClass, hasClass, toggleClass

В этой статье мы рассмотрим несколько полезных методов библиотеки jQuery для манипуляции классами: jQuery addClass, removeClass, hasClass и toggleClass. Для демонстрации возможностей перечисленных методов мы создадим интерактивный пример.

Содержание

jQuery addClass: добавить класс
jQuery removeClass: удалить класс
jQuery hasClass: проверить на существование класса
jQuery toggleClass: «переключить» класс
Заключение

jQuery addClass: добавить класс

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

Синтаксис метода jQuery addClass:

$(selector).addClass(classNames);

selector — CSS-селектор элемента.
classNames — строка, содержащая один или несколько классов, которые добавляются к элементу. Несколько классов перечисляются через пробел.

Продемонстрируем возможности метода jQuery addClass на примере. Создадим блок с текстом. При нажатии на любое слово текста оно будет выделяться определенными стилями.

HTML:

<div id="demoTextBlock" class="demoTextBlock">
    <div id="demoText" class="demoTextBlock__text">
        <p>
            <span>Устанавливайте</span>
            <span>выделение</span>
            <span>слов</span>
            <span>в</span>
            <span>этом</span>
            <span>тексте</span>,
            <span>нажимая</span>
            <span>на</span>
            <span>слова</span>.
        </p>
    </div>
</div>

CSS:

.demoTextBlock__text {
    background: #ddd;
    color: #393939;
    padding: 10px;
}

.demoTextBlock__text span {
    cursor: pointer;
    user-select: none;
}

.highlight {
    background: #00c1c5;
    color: #fff;
    border-radius: 4px;
}

JavaScript:

// Назначаем обработчик события клика на каждый тег span
$('#demoText span').click(function() {
    // Добавляем класс для выделения слова
    $(this).addClass('highlight');
});

Результат:

Устанавливайте выделение слов в этом тексте, нажимая на слова.

Таким образом, каждое слово текста находится в теге span. На каждый тег span мы вешаем обработчик события нажатия кнопки мыши. После клика метод jQuery addClass добавляет класс highlight к элементу. Этот класс стилизует тег span.

jQuery removeClass: удалить класс

Для удаления конкретного класса существует метод jQuery removeClass. Он удаляет один или несколько указанных классов, не затрагивая остальных.

Синтаксис метода jQuery removeClass:

$(selector).removeClass(classNames);

selector — CSS-селектор элемента.
classNames — строка, где указан один или несколько классов для удаления. Для передачи в метод нескольких классов их нужно перечислить через пробел.

Переделаем наш пример. Теперь все слова текста в блоке будут выделены. При клике на любое слово выделение будет снято.

HTML:

<div id="demoTextBlock" class="demoTextBlock">
    <div id="demoText" class="demoTextBlock__text">
        <p>
            <span class="highlight">Удаляйте</span>
            <span class="highlight">выделение</span>
            <span class="highlight">слов</span>
            <span class="highlight">в</span>
            <span class="highlight">этом</span>
            <span class="highlight">тексте</span>,
            <span class="highlight">нажимая</span>
            <span class="highlight">на</span>
            <span class="highlight">слова</span>.
        </p>
    </div>
</div>

CSS-код остается тот же.

JavaScript:

$('#demoText span').click(function () {
    // Удаляем класс для очистки стилей слова
    $(this).removeClass('highlight');
});

Результат:

Удаляйте выделение слов в этом тексте, нажимая на слова.

В этом примере с помощью метода jQuery removeClass мы удаляем класс у элементов span, тем самым удаляя стили слов.

jQuery hasClass: проверить на существование класса

Чтобы проверить наличие класса у элемента, можно использовать метод jQuery hasClass. Этот метод применяют, например, в условной конструкции if для выполнения определенного кода, в зависимости от наличия либо отсутствия какого-либо класса.

Синтаксис метода jQuery hasClass:

$(selector).hasClass(className);

selector — CSS-селектор элемента.
className — имя класса, наличие которого необходимо проверить у выбранного элемента.

Доработаем предыдущий пример и сделаем возможность добавлять и удалять выделение у слова. После нажатия на определенное слово выделение будет удалено, если оно существует. И, наоборот, при отсутствии выделения оно будет добавлено.

HTML:

<div id="demoTextBlock" class="demoTextBlock">
    <div id="demoText" class="demoTextBlock__text">
        <p>
            <span>Выделяйте</span>
            <span>и</span>
            <span>снимайте</span>
            <span>выделение</span>
            <span>слов</span>
            <span>в</span>
            <span>этом</span>
            <span>тексте</span>,
            <span>нажимая</span>
            <span>на</span>
            <span>слова</span>.
        </p>
    </div>
</div>

CSS-код не меняем.

JavaScript:

// Каждому тегу span в текстовом блоке назначаем обработчик события нажатия на кнопку
$('#demoText').find('span').click(function() {
    // Проверяем, есть ли класс highlight
    if ($(this).hasClass('highlight')) {
        // Если класс есть, удаляем его
        $(this).removeClass('highlight');
    } else {
        // При отсутствии класса добавляем его
        $(this).addClass('highlight');
    }
});

Результат:

Выделяйте и снимайте выделение слов в этом тексте, нажимая на слова.

В описанном примере мы проверяем, есть ли класс highlight у элемента span. Добавляем этот класс, если он отсутствует, либо удаляем в противном случае.

jQuery toggleClass: «переключить» класс

В предыдущем примере мы написали логику добавления и удаления класса, в зависимости от его наличия у элемента. Однако такого эффекта можно достичь более простым способом — используя класс jQuery toggleClass.

Синтаксис метода jQuery toggleClass:

$(selector).toggleClass(className);

selector — CSS-селектор элемента.
className — имя класса, который будет добавлен или удален у элемента.

Продемонстрируем работу этого метода в нашем примере. Заменим логику проверки наличия класса, используя метод toggleClass. А также сделаем возможность показывать и прятать весь блок с текстом. Для этого добавим текст, нажимая на который мы будем «переключать» состояние текстового блока: отображать либо скрывать.

HTML:

<div id="demoTextBlock" class="demoTextBlock">
    <p id="demoTextToggle" class="demoTextBlock__toggle">Какой-то важный текст</p>
    <div id="demoText" class="demoTextBlock__text hidden">
        <p>
            <span>Выделяйте</span>
            <span>и</span>
            <span>снимайте</span>
            <span>выделение</span>
            <span>слов</span>
            <span>в</span>
            <span>этом</span>
            <span>тексте</span>,
            <span>нажимая</span>
            <span>на</span>
            <span>слова</span>.
        </p>
    </div>
</div>

CSS:

.demoTextBlock__toggle {
    color: #00c1c5;
    cursor: pointer;
}

.demoTextBlock__toggle:hover {
    text-decoration: underline;
}

.demoTextBlock__text {
    background: #ddd;
    color: #393939;
    padding: 10px;
}

.demoTextBlock__text span {
    cursor: pointer;
    user-select: none;
}

.highlight {
    background: #00c1c5;
    color: #fff;
    border-radius: 4px;
}

.hidden {
    display: none;
}

JavaScript:

// Получаем ссылку на блок с текстом
const textBlock = $('#demoText');

// Назначаем обработчик события клика на кнопку
$('#demoTextToggle').click(function() {
    // Показываем либо прячем текстовый блок, переключая класс hidden
    textBlock.toggleClass('hidden');
});

// Ищем теги span в текстовом блоке и назначаем им обработчик события нажатия на кнопку
textBlock.find('span').click(function() {
    // Переключаем класс выделения
    $(this).toggleClass('highlight');
});

Результат:

Какой-то важный текст

В этом примере мы «переключаем» классы с помощью метода jQuery toggleClass, что намного удобнее, чем писать условную логику для добавления и удаления класса.

Заключение

Таким образом, мы разобрали возможности методов jQuery addClass, removeClass, hasClass и toggleClass. В статье был представлен пример, где были использованы все перечисленные методы. Используя эти методы, можно создавать различные интерактивные эффекты на сайте. Например, метод toggleClass довольно удобно использовать для создания выпадающего меню, интерактивный пример которого можно посмотреть в конце этой статьи.

jQuery addClass и другие методы манипуляции классами элементов

jQuery addClass: добавить класс

jQuery removeClass: удалить класс

jQuery hasClass: проверить на существование класса

jQuery toggleClass: «переключить» класс

Заключение