Как при клике на пункт не убирать класс у другого блока?

Question

[TipTop89]

При клике на пункт он становится красный и появляется число. При клике на тот же пункт число исчезает. Нужно, чтобы число оставалось до того момента, пока все пункты не станут черного цвета (то есть, без класса _active). И как можно сделать так, чтобы число выводилось по количеству кликнутых красных пунктов (если 2 красных пункта = число 2, 1 = 1 и тд)?

Answer 1

[Антон Неверов]

const catalogItems = document.querySelectorAll('.select-catalog__item');
const catalogCount = document.querySelector('.select-catalog__title-count');

const updateActiveCount = () => {
  const activeCount = [...catalogItems].filter(i => i.classList.contains('_active')).length
  catalogCount.innerText = activeCount
  if (activeCount > 0) {
    catalogCount.classList.add('_active')
  } else {
    catalogCount.classList.remove('_active')
  }
}

for (const item of catalogItems) {
  item.onclick = ({ target }) => {
    const isActive = target.classList.toggle('_active')
    updateActiveCount()
  }
}

Comments

[TipTop89]

Спасибо! Подскажите пожалуйста а как сделать что-бы цифра появлялись только над той колонкой в которой был клик?