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

Question

[prokopn]

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

Answer 1

[historydev]

Рефакторинг на тебе.

Answer 2

[0xD34F]

Куда кликаем и что фильтруем:

// такого у вас сейчас нет, сами догадайтесь, кому надо класс добавить
const containerSelector = '.container';

const buttonsSelector = `${containerSelector} .filter__navigation`;
const buttonSelector = `${buttonsSelector} > [data-filter]`;
const buttonActiveClass = '_active';

const itemsSelector = `${containerSelector} .search__body`;
const itemClass = 'filter-column';
const itemHiddenClass = '_hide';
const getItemActiveClass = ({ dataset: { filter } }) =>
  filter === 'all' ? itemClass : `filter__column_${filter}`;

Назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function({ currentTarget: { parentNode: t } }) {
  const activeItemSelector = `.${getItemActiveClass(this)}`;

  t.querySelector(`.${buttonActiveClass}`)?.classList.remove(buttonActiveClass);
  this.classList.add(buttonActiveClass);

  while (!(t = t.parentNode).matches(containerSelector)) ;
  NodeList.prototype.forEach.call(t.querySelector(itemsSelector).children, n => {
    n.classList[n.matches(activeItemSelector) ? 'remove' : 'add'](itemHiddenClass);
  });
});

Или, применяем делегирование:

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    const activeItemClass = getItemActiveClass(t);

    for (const n of t.closest(buttonsSelector).querySelectorAll(buttonSelector)) {
      n.classList.toggle(buttonActiveClass, n === t);
    }

    for (const n of t.closest(containerSelector).getElementsByClassName(itemClass)) {
      n.classList.toggle(itemHiddenClass, !n.classList.contains(activeItemClass));
    }
  }
});