Как добавлять класс при клике только 2 раза?

Question

[prokopn]

Подскажите как можно добавлять класс _active для контента в каждом блоке только 2 раза? и почему не добавляется класс _active пункту на который кликаю? то-есть кликнули на 2 пункта сверху, подсветились 4 пункта снизу, если кникнут еще на один то с одного из пунктов убрать класс _active, другим добавить? Спасибо!

Answer 1

[catch-a-chalk]

Привет,

const mainBlocks = document.querySelectorAll('.main-block');
const maxActive = 2; // Максимальное количество активных элементов

mainBlocks.forEach(block => {
    block.addEventListener("click", function () {
        const id = block.dataset.id;
        const contentBlocks = document.querySelectorAll(`.other-block[data-id='${id}']`);

        // Если элемент уже активен, деактивируем его
        if (block.classList.contains('_active')) {
            block.classList.remove('_active');
            contentBlocks.forEach(contentBlock => contentBlock.classList.remove('_active'));
        } else {
            // Проверяем, сколько элементов уже активно
            const activeBlocks = document.querySelectorAll('.main-block._active');
            if (activeBlocks.length >= maxActive) {
                // Деактивируем первый активный элемент
                const firstActive = activeBlocks[0];
                firstActive.classList.remove('_active');
                const firstId = firstActive.dataset.id;
                document.querySelectorAll(`.other-block[data-id='${firstId}']`).forEach(contentBlock => contentBlock.classList.remove('_active'));
            }

            // Активируем текущий элемент
            block.classList.add('_active');
            contentBlocks.forEach(contentBlock => contentBlock.classList.add('_active'));
        }
    });
});