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

Bliss.js предоставляет удобные методы для работы с классами элементов DOM, упрощая процесс их добавления, удаления и переключения. Основной метод для переключения классов — toggleClass. Он работает на выбранных элементах и позволяет динамически изменять состояние классов без необходимости писать сложные условные конструкции.

Метод toggleClass

Сигнатура метода:

element.toggleClass(className, [force])

  • className — строка или несколько имён классов, разделённых пробелом, которые необходимо переключить.

  • force — необязательный булевый параметр:

    • true — класс будет гарантированно добавлен.
    • false — класс будет гарантированно удалён.
    • Если параметр опущен, класс просто переключается: если есть — удаляется, если нет — добавляется.

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

var btn = Bliss('#myButton');
btn.toggleClass('active');

В этом примере класс active добавляется к кнопке, если его нет, и удаляется, если он уже присутствует.

Переключение нескольких классов одновременно

Bliss.js позволяет передавать несколько классов через пробел:

var panel = Bliss('.panel');
panel.toggleClass('hidden highlighted');

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

Использование функции в качестве аргумента

Для более сложной логики можно передавать функцию вместо строки:

element.toggleClass(function(index, currentClass) {
    return currentClass.includes('open') ? 'closed' : 'open';
});

Функция получает два аргумента:

  1. index — позиция элемента в наборе элементов.
  2. currentClass — текущий список классов элемента.

Возвращаемое значение функции определяет, какой класс будет переключён.

Примеры динамического управления классами

  1. Переключение на основе события:
Bliss('.accordion-header').on('click', function() {
    this.toggleClass('expanded');
    this.nextElementSibling.toggleClass('visible');
});

Здесь при клике на заголовок аккордеона переключается класс expanded у самого заголовка и класс visible у контента.

  1. Применение к коллекции элементов:
Bliss('.tabs li').each(function(tab) {
    tab.toggleClass('active', tab.dataset.selected === 'true');
});

Метод each проходит по каждому элементу коллекции, и toggleClass применяет класс active только к выбранным вкладкам.

Интеграция с другими методами Bliss.js

toggleClass можно комбинировать с другими утилитами:

  • hasClass — проверка наличия класса:
if (!element.hasClass('visible')) {
    element.toggleClass('visible');
}
  • addClass и removeClass — ручное управление, если требуется более явная логика:
element.removeClass('hidden').addClass('shown');

Производительность и оптимизация

Bliss.js оптимизирован для работы с большим количеством элементов. Метод toggleClass обрабатывает сразу все совпадающие элементы, минимизируя количество операций с DOM. Для массовых изменений рекомендуется:

  • Использовать селекторы, возвращающие коллекции элементов, чтобы применять метод один раз.
  • По возможности комбинировать классы, которые часто переключаются вместе, для уменьшения числа вызовов методов.

Частые сценарии использования

  • Меню бургер: переключение классов open и close.
  • Табы и аккордеоны: динамическое переключение видимости и активного состояния.
  • Валидация форм: добавление и удаление классов error, valid.
  • Темизация: смена классов для переключения стилей (светлая/тёмная тема).

Советы по написанию чистого кода

  • Перед использованием toggleClass убедиться, что элемент существует.
  • Использовать именование классов, отражающее состояние (is-active, is-hidden), чтобы облегчить чтение кода.
  • Избегать сложных функций внутри toggleClass, если можно заранее вычислить результат и передать булево значение.

toggleClass является мощным инструментом в арсенале Bliss.js, позволяя управлять состояниями элементов эффективно и лаконично, обеспечивая чистый и понятный код при работе с DOM.

Оглавление