@MalGym

Как сделать фильтр?

Подскажите, нужно сделать множественный выбор в фильтре. Так как я сделал, можно выбрать только один вариант, но вариантов выбора должно быть больше, можно выбрать все пункты отдельно , не нажимая ( all )

<div class="wrap-filter">
  <div class="filter-1">
    <h3>Фильтер 1</h3>
    <ul id="filter-approach">
      <li><a class="all">ALL</a></li>
      <li><a class="gpte">GPTE</a></li>
      <li><a class="hub">Hub</a></li>
      <li><a class="customdev">Custom Dev</a></li>
     </ul>
  </div>
</div>
<div class="wrap-block">
  <div class="all dev gpte tourop active">Блок 1</div>
  <div class="all hub active">Блок 2</div>
  <div class="all hub tourop active">Блок 3</div>
  <div class="all dev gpte tourop active">Блок 4</div>
  <div class="all dev customdev otas active">Блок 5</div>
  <div class="all gpte tourop active">Блок 6</div>
  <div class="all dev hub tourop active">Блок 7</div>
  <div class="all dev gpte hub active">Блок 8</div>
  <div class="all dev active">Блок 9</div>  
</div>

let filterApproach = document.querySelector('#filter-approach');
let blocksElement = document.querySelector('.wrap-block').querySelectorAll('.all');

filterApproach.addEventListener('click', function(e) {
  let activeElement = e.target.className;

  blocksElement.forEach(el => {
    if(el.classList.contains(activeElement)) {
      el.style.display = 'block';
    } else {
      el.style.display = 'none';
    }
  });
  
});
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы