Как отфильтровать определенные div с классами, совпадающие с дата-атрибутами ссылки?

Question

[ligisayan]

Всем привет! Есть фильтр, который при клике на кнопку должен отображать div с классом с соответствующим ему пунктом get-age,

т.е. по клику на ссылку с get-age="age_3_6" должен остаться только div с классом age_3_6 и т.п. Кнопка все должна выводить все div как и сейчас,

если нет совпадающих дата-атрибутов и классов - ничего не выводить. У меня почему-то не получается это сделать - где-то ошибка:

Answer 1

[0xD34F]

Во-первых, get-age - это не data-атрибут. Меняйте на data-age.

Во-вторых, сделайте значения селекторами, т.е. вместо age_3_6 будет .age_3_6, вместо age_7_10 будет .age_7_10 и т.д., ну а у элемента "все" будет data-age="*".

const itemSelector = '.ped_holder .ped';
const buttonSelector = '.ages a';
const activeButtonClass = 'active';
const selectorAttr = 'age';

const $buttons = $(buttonSelector).click(function() {
  const selector = $buttons
    .removeClass(activeButtonClass)
    .filter(this)
    .addClass(activeButtonClass)
    .data(selectorAttr);

  $(itemSelector).hide().filter(selector).show();
});

// или, к чёрту jquery

const buttons = document.querySelectorAll(buttonSelector);
const items = document.querySelectorAll(itemSelector);

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  const selector = t.dataset[selectorAttr];
  buttons.forEach(n => n.classList.toggle(activeButtonClass, n === t));
  items.forEach(n => n.style.display = n.matches(selector) ? '' : 'none');
}