0

Подскажите пожалуйста, как сделать так что-бы число появлялась только в том списке, в котором кликнули по пункту? Сейчас на какой бы пункт я не кликнул появляется сразу в двух колонках, а нужно что-бы только в одной. Спасибо

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

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

for (const item of catalogItems) {
  item.onclick = ({ target }) => {
    const isActive = target.classList.toggle('_active')
    updateActiveCount()
  }
}
.select-catalog{
  display: flex;
}

.select-catalog__title-count {
  display: none;
}

.select-catalog__title-count._active {
  display: flex;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0px 0px 0px 8px;
  align-items: center;
  justify-content: center;
  background-color: #a89583;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  font-feature-settings: "tnum"on, "lnum"on;
}

.select-catalog__item {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 16px 8px 16px;
  border: none;
  transition: background-color 0.3s ease;
  font-size: 16px;
  font-weight: 400;
  line-height: math.div(24, 16);
  background-color: rgba(168, 149, 131, 0.08);
}

.select-catalog__item._active {
  color: red;
}
<div class="catalog__selects select-catalog">
  <div class="select-catalog__column">
    <div class="select-catalog__items">
      <div class="select-catalog__title">
        <div class="select-catalog__title-count">1</div>
      </div>
      <div class="select-catalog__list">
        <div class="select-catalog__item">
          One size
        </div>
        <div class="select-catalog__item">
          XXS
        </div>
        <div class="select-catalog__item">
          XS
        </div>
      </div>
    </div>
  </div>
  <div class="select-catalog__column">
    <div class="select-catalog__items">
      <div class="select-catalog__title">
        <div class="select-catalog__title-count">1</div>
      </div>
      <div class="select-catalog__list">
        <div class="select-catalog__item">
          One size
        </div>
        <div class="select-catalog__item">
          XXS
        </div>
        <div class="select-catalog__item">
          XS
        </div>
      </div>
    </div>
  </div>
</div>

1 ответ 1

0

как сделать так что-бы число появлялась только в том списке, в котором кликнули по пункту?

Предложу такой вариант...

document.querySelector('.catalog__selects').addEventListener('click', e => {
  let o = e.target.closest('.select-catalog__item')
  if (!o) return
  o.classList.toggle('_active')
  o = o.closest('.select-catalog__items')
  const n = o.querySelectorAll('.select-catalog__list ._active').length
  o = o.querySelector('.select-catalog__title-count')
  o.textContent = n ? n : ''
  if (n > 0) {
    o.classList.add('_active')
  } else {
    o.classList.remove('_active')
  }
})
.select-catalog {
  display: flex;
}

.select-catalog__title-count {
  display: none;
}

.select-catalog__title-count._active {
  display: flex;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0px 0px 0px 8px;
  align-items: center;
  justify-content: center;
  background-color: #a89583;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  font-feature-settings: "tnum"on, "lnum"on;
}

.select-catalog__item {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 16px 8px 16px;
  border: none;
  transition: background-color 0.3s ease;
  font-size: 16px;
  font-weight: 400;
  line-height: math.div(24, 16);
  background-color: rgba(168, 149, 131, 0.08);
}

.select-catalog__item._active {
  color: red;
}
<div class="catalog__selects select-catalog">
  <div class="select-catalog__column">
    <div class="select-catalog__items">
      <div class="select-catalog__title">
        <div class="select-catalog__title-count">1</div>
      </div>
      <div class="select-catalog__list">
        <div class="select-catalog__item">
          One size
        </div>
        <div class="select-catalog__item">
          XXS
        </div>
        <div class="select-catalog__item">
          XS
        </div>
      </div>
    </div>
  </div>
  <div class="select-catalog__column">
    <div class="select-catalog__items">
      <div class="select-catalog__title">
        <div class="select-catalog__title-count">1</div>
      </div>
      <div class="select-catalog__list">
        <div class="select-catalog__item">
          One size
        </div>
        <div class="select-catalog__item">
          XXS
        </div>
        <div class="select-catalog__item">
          XS
        </div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.