Как отфильтровать карточки в зависимости от выбора?

Question

[Im p3l]

Подскажите, как можно отфильтровать и оставить только те карточки в 3 блоке, которые будут соответствовать выбору в 1 блоке и во втором. (первый и второй блок не зависимы друг от друга, результаты в третьем блоке зависят от выбора в первых двух)

И как можно оптимизировать нажатия на пункты, чтобы не было двух одинаковых блоков выбора в JS коде?

Answer 1

[0xD34F]

Фильтрам добавить data-атрибуты, указывающие, по какому свойству надо отбирать карточки:

<div data-filter="service">
  <div class="sign">Streaming service</div>
  <div class="item">Netflix</div>
  <div class="item">HBO Max</div>
  <div class="item">Hulu</div>
</div>
<div data-filter="genre">
  <div class="sign">Movie genre</div>
  <div class="item">Comedy</div>
  <div class="item">Action</div>
  <div class="item">Horror</div>
  <div class="item">Drama</div>
  <div class="item">Fantasy</div>
</div>

Эти свойства в виде опять же data-атрибутов добавить карточкам:

<li class="card" data-service="Netflix" data-genre="Comedy">

Собственно фильтрация:

const cardSelector = '.card';
const hiddenCardClass = 'hidden';
const filterSelector = '[data-filter]';
const filterItemSelector = `${filterSelector} .item`;
const activeFilterItemClass = 'item_active';

document.querySelector('.filters').addEventListener('click', e => {
  const item = e.target.closest(filterItemSelector);
  if (!item) {
    return;
  }

  item.closest(filterSelector).querySelectorAll(filterItemSelector).forEach(n => {
    n.classList[n === item ? 'toggle' : 'remove'](activeFilterItemClass);
  });

  const values = Array.from(
    e.currentTarget.querySelectorAll(`.${activeFilterItemClass}`),
    n => [ n.closest(filterSelector).dataset.filter, n.innerText ]
  );

  document.querySelectorAll(cardSelector).forEach(n => {
    n.classList.toggle(hiddenCardClass, values.some(m => n.dataset[m[0]] !== m[1]));
  });
});