Как правильно инвертировать event?

Question

[gpyshenko]

Хочу сделать чтобы по кнопке фильтра, например если нажал на "Спорт" то все блоки отличающиеся от блоков с классом "isSport" были скрыты. Я конечно могу написать фильтр по другому, но код длинный, но если сделать исключение по классу то код как я понял будет короче и лаконичнее)) Очень прошу помочь.
P.S HTML написан с помощью Pug.

.filters
  .filter.filterSport Спорт
  .filter.filterFood Еда
  .filter.filterWears Одежда
.wrapper
  .link.isSport
  .link.isSport
  .link.isSport
  .link.isFood
  .link.isFood
  .link.isFood
  .link.isWears
  .link.isWears
  .link.isWears

var filterSport = document.querySelector('.filterSport'),
    filterFood = document.querySelector('.filterFood'),
    filterWears = document.querySelector('.filterWears'),
    isSport = document.querySelectorAll('.isSport'),
    isFood = document.querySelectorAll('.isFood'),
    isWears = document.querySelectorAll('.isWears');

filterSport.onclick = function() {
  [].forEach.call(isSport, function(e) {
    if(e.target !== isSport) {
      e.classList.add('hide')
    }
		
	});
	// [].forEach.call(isWears, function(e) {
	// 	e.classList.add('hide')
	// });
}

Comments

[Kovalsky]

Я читаю заголовок вопроса, читаю текст вопроса, потом опять заголовок вопроса... и никак не могу понять как они связаны. В чем вопрос у вас? Вы хотите обойтись одним классом для контейнера или что?

Answer 1

[gleendo]

// Что то типа этого
const links = document.querySelectorAll(`.link`);

filterSport.addEventListener(`click`, () => {
  for (let link of links) {
    if (!link.classList.contains(`isSport`)) {
      link.style.display = `none`;
    }
  }
}, false);

Comments

[gpyshenko]

Что то этот вариант не работает(( Он скрывает все блоки, сейчас скину
ссылку

[gpyshenko]

gpyshenko: А стоп у тебя ошибка, ты просто по запарке наверно поставил точку))

Вот так было у тебя
if (!link.classList.contains(`.isSport`))
Вот что нужно было))
if (!link.classList.contains(`isSport`))

[gpyshenko]

Спасибо iamevg_))

Answer 2

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/oweQqg?editors=1010

<div class="filters">
  <button class="filter" data-filter="isSport">Sport</button>
  <button class="filter" data-filter="isFood">Food</button>
  <button class="filter" data-filter="isWears">Wears</button>
</div>
<div class="wrapper">
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
</div>

let filters = document.querySelector('.filters');
let filterButtons = filters.querySelectorAll('.filter');
let wrapper = document.querySelector('.wrapper');
let links = wrapper.querySelectorAll('.link');

filters.addEventListener('click', e => {
  if (e.target.dataset.filter) {

    if (e.target.classList.contains('filter_active')) {
      
      e.target.classList.remove('filter_active');
      links.forEach(item => item.classList.add('link_visible'));
    
    } else {
    
      filterButtons.forEach(btn => btn.classList.remove('filter_active'));
      e.target.classList.add('filter_active');

      links.forEach(item => {
        item.classList.toggle(
          'link_visible',
          item.classList.contains(e.target.dataset.filter)
        );
      });

    }
  }
});

Comments

[gpyshenko]

Видно что логика огонь, я так понял мне нужно будет подтянуть знания в js)) Частично понял, частично нет))
Дизайн классный ты сделал кстати)) Кстати Babel есть в Gulp?

[Сергей delphinpro]

gpyshenko: Логика очень простая.
Кнопки и плашки связаны через одинаковые дата-атрибуты и класс. Это упростит js код.
if (e.target.dataset.filter) {} - это просто перестраховка от ошибок, если data-filter забыли указать
if (e.target.classList.contains('filter_active')) - проверка, нажата кнопка или нет. Если нажата - делаем ее ненажатой, и показываем все плашки, т.е. отключаем фильтр.

filterButtons.forEach(...); - все кнопки "отжимаем"
e.target.classList.add('filter_active'); - ту по которой кликнули - "нажимаем" визуально

links.forEach(); - циклом пробегаемся по всем плашкам, и если у плашки есть класс как в дата-атрибуте, то показываем, иначе - скрываем.

Все визуальные изменения делаем через присвоение/удаление соответствующих css-классов, никаких style.display = 'none'.

Дизайн я нагло спёр с первого попавшегося пена с кнопками =)

Babel плагин для гальпа, конечно, есть.
https://www.npmjs.com/package/gulp-babel
Он есть для всего - babeljs.io/docs/setup/#installation

[gpyshenko]

А как сделать сброс всех фильтров добавив кнопку "Все"? Насчет твоего объяснения, я сейчас почитаю)) Я просто с data-атрибутами не работал, уже ппц как привык использовать jQuery, вот потихоньку перехожу на чистый js))

[Сергей delphinpro]

gpyshenko: Обновил пен - https://codepen.io/delphinpro/pen/oweQqg?editors=0010

[Сергей delphinpro]

Но тут уже небольшой рефакторинг напрашивается. Код переключения состояний следует выносить в функции дабы соблюсти DRY.

[gpyshenko]

Блин обожаю тостер за такое гостеприи́мство и помощь)) Сергей выручили очень, немного наставления и объяснения намотаю на ус)) Спасибо))

Answer 3

[Vasyl Kovbassa]

reactjs, а особенно vuejs + pug сделают тебе такую ​​магию, что и не снилось.
П.С: Если ужо используешь pug, то используй миксы, объекты данных и циклы, а не копипаст тегов.