Работа с несколькими классами одновременно

Umbrella JS предоставляет удобные методы для работы с классами элементов DOM, позволяя добавлять, удалять или переключать несколько классов одновременно без необходимости писать громоздкие циклы и условия. Это особенно полезно при динамическом управлении стилями и состояниями элементов на странице.

Методы addClass, removeClass и toggleClass

Все три метода поддерживают передачу нескольких классов через пробел:

u('.box').addClass('highlight active visible');

В этом примере элемент с классом box получает сразу три новых класса: highlight, active и visible. Подобным образом можно удалять классы:

u('.box').removeClass('highlight active');

Метод toggleClass позволяет переключать несколько классов одновременно:

u('.box').toggleClass('active selected');

Если у элемента присутствует один из классов, он будет удалён, а отсутствующие будут добавлены. При работе с toggleClass можно также использовать второй параметр — булевый флаг, чтобы явно указать, добавлять или удалять классы:

u('.box').toggleClass('active selected', true);  // Добавляет оба класса
u('.box').toggleClass('active selected', false); // Удаляет оба класса

Проверка наличия нескольких классов

Метод hasClass позволяет проверить наличие одного класса у каждого выбранного элемента. Для проверки нескольких классов одновременно можно комбинировать его с методами Umbrella JS:

u('.box').each(function(el) {
    if (u(el).hasClass('active') && u(el).hasClass('selected')) {
        console.log('Элемент активен и выбран');
    }
});

Хотя прямого метода для проверки нескольких классов нет, такая комбинация each и hasClass решает задачу эффективно.

Работа с классами через массивы и строки

Umbrella JS принимает классы в виде строки, где классы разделяются пробелами. При необходимости динамического добавления нескольких классов можно использовать массив и объединять его с помощью join(' '):

const classes = ['highlight', 'active', 'visible'];
u('.box').addClass(classes.join(' '));

Это удобно, когда список классов формируется программно.

Цепочка вызовов с классами

Благодаря тому, что методы Umbrella JS возвращают объект выбора, операции с классами можно объединять в цепочки вызовов:

u('.box')
    .addClass('highlight')
    .removeClass('inactive')
    .toggleClass('selected');

Такой подход позволяет управлять классами компактно и читаемо, избегая многократного обращения к DOM.

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

При выборе нескольких элементов методы addClass, removeClass и toggleClass применяются ко всем выбранным элементам одновременно:

u('.item').addClass('visible');
u('.item').removeClass('hidden');

Это особенно эффективно для списков, таблиц или коллекций карточек, где требуется синхронное изменение внешнего вида.

События и динамическое переключение классов

Сочетание классов и событий позволяет создавать динамические интерфейсы без громоздкой логики. Например, переключение класса при клике:

u('.tab').on('click', function(el) {
    u('.tab').removeClass('active');
    u(el).addClass('active');
});

Если требуется добавить несколько классов одновременно при событии:

u('.tab').on('click', function(el) {
    u(el).toggleClass('active highlighted');
});

Итоговые рекомендации по работе с несколькими классами

  • Для добавления или удаления нескольких классов использовать строку с пробелами или массив с join(' ').
  • Для переключения нескольких классов одновременно использовать toggleClass с возможностью передачи булевого флага.
  • Для проверки наличия нескольких классов применять комбинацию each и hasClass.
  • Методы Umbrella JS всегда действуют на все выбранные элементы, что упрощает массовое управление стилями.
  • Цепочки вызовов повышают читаемость и сокращают количество обращений к DOM.

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

Оглавление