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

Библиотека Cash предоставляет легковесный и удобный инструмент для работы с DOM, аналогичный jQuery, но с упором на современный синтаксис и производительность. Одной из ключевых возможностей является управление классами элементов через методы addClass, removeClass и toggleClass. Особое внимание уделяется переключению классов, позволяющему динамически изменять состояние элементов.

Метод toggleClass

Метод toggleClass используется для добавления класса к элементу, если его нет, или удаления, если класс уже присутствует. Синтаксис выглядит следующим образом:

$(selector).toggleClass(className, [force]);

Параметры:

  • className — строка с именем класса или пробел-разделенный список классов.
  • [force] — необязательный булевый параметр. Если установлен в true, класс будет добавлен, если в false — удалён. Если не указан, поведение определяется текущим состоянием элемента.

Примеры использования:

// Переключение одного класса
$('.menu-item').toggleClass('active');

// Переключение нескольких классов
$('.menu-item').toggleClass('active highlighted');

// Принудительное добавление класса
$('.menu-item').toggleClass('active', true);

// Принудительное удаление класса
$('.menu-item').toggleClass('active', false);

Особенности:

  • toggleClass может работать с множественными классами, разделёнными пробелами.
  • Метод автоматически применяется ко всем выбранным элементам, что исключает необходимость ручной итерации через forEach или map.

Передача функции в toggleClass

Метод toggleClass поддерживает передачу функции в качестве первого аргумента. Это полезно для динамического вычисления классов на основе индекса элемента или его текущего состояния.

$('.menu-item').toggleClass((index, currentClass) => {
    return index % 2 === 0 ? 'even' : 'odd';
});
  • index — порядковый номер элемента в наборе выбранных элементов.
  • currentClass — текущий класс элемента, что позволяет создавать условные правила добавления или удаления.

Пример применения функции для условного переключения:

$('.button').toggleClass((i, cls) => cls.includes('disabled') ? 'enabled' : 'disabled');

Здесь происходит смена состояния кнопки с disabled на enabled и обратно, в зависимости от текущего класса.

Переключение нескольких классов с различной логикой

Можно использовать массив или строку с пробелами для управления несколькими классами одновременно. Например:

$('.card').toggleClass('highlight selected');

Для каждого элемента:

  • Если класс отсутствует — добавляется.
  • Если присутствует — удаляется.

Также возможна комбинация с функцией:

$('.card').toggleClass((i, cls) => i % 2 === 0 ? 'highlight' : 'selected');

Таким образом, чётко разделяются классы для чётных и нечётных элементов.

Применение toggleClass с анимациями и состояниями

Переключение классов часто используется для динамических интерфейсов, например, активации вкладок, раскрытия меню или изменения стилей при наведении. В сочетании с CSS-переходами и анимациями это позволяет создавать плавные эффекты без ручного управления стилями через JavaScript.

$('.accordion-header').on('click', function() {
    $(this).next('.accordion-content').toggleClass('open');
});
  • При клике на заголовок аккордеона содержимое получает или теряет класс open.
  • CSS отвечает за плавное раскрытие с transition.

Особенности работы с классами в Cash

  • Методы управления классами не перезаписывают существующие классы: добавление и удаление происходит только для указанных имён.
  • Все методы (addClass, removeClass, toggleClass) автоматически применяются к множественным выбранным элементам, что обеспечивает компактный код без циклов.
  • Методы учитывают динамически созданные элементы, если они уже выбраны через $().

Практические советы

  1. Для единичного состояния элементов, например, активации выбранного пункта меню, удобно использовать toggleClass с логическим флагом:
$('.menu-item').removeClass('active');
$(this).toggleClass('active', true);

  1. Для динамического расчёта классов, зависящих от индекса, состояния или других атрибутов, передавать функцию в toggleClass более эффективно, чем проверять hasClass вручную.

  2. Для комбинации нескольких классов и условий лучше использовать строку с пробелами или функцию с условной логикой, чтобы избежать лишнего дублирования кода.

Метод toggleClass в библиотеке Cash является мощным инструментом для управления состоянием элементов DOM. Его гибкость и поддержка функции в качестве аргумента позволяют строить сложные интерфейсы с минимальным количеством кода, сохраняя чистоту и читаемость JavaScript.

Оглавление