Фильтрация по категориям. JavaScript

Question

Доброго времени суток!

Есть массив объектов. Фильтрация происходить через добавление класса. Но почему-то прячутся те объекты, которые должны оставаться. И оператор "!=" не помогает.

Подскажите что делаю не так.

'use strict';

let filters = document.querySelectorAll('a[data-filter]');

for (let filter of filters) {
  filter.addEventListener('click', function(e) {
    e.preventDefault();

    let catId = filter.getAttribute('data-filter');
    let workCat = document.querySelectorAll('.portfolio__col[data-cat="' + catId + '"]');

    workCat.forEach(function(i) {

      if (workCat !== catId) {
        i.classList.add('hide');
      } else {
        i.classList.remove('hide');
      }

    })

  });
}

Робочий вариант! ' может кому поможет =) '

let filters = document.querySelectorAll('a[data-filter]');

for (let filter of filters) {
  filter.addEventListener('click', function(e) {
    e.preventDefault();

    let catId = filter.getAttribute('data-filter');
    let workCat = document.querySelectorAll('.portfolio__col');

    workCat.forEach(function(c) {

      if (catId === 'all') {
        c.classList.remove('hide');
      } else {
        if (c.getAttribute('data-cat') !== catId) {
          c.classList.add('hide');
        } else {
          c.classList.remove('hide');
        }
      }

    })

  }); /* end listener*/
}

.portfolio__col {
  display: inline-block;
  margin: 10px;
  width: 150px;
}

.hide {
  display: none;
}

<div class="works__nav">
  <a class="works__nav-link" href="#" data-filter="all">All</a>
  <a class="works__nav-link" href="#" data-filter="app">App</a>
  <a class="works__nav-link" href="#" data-filter="website">Websites</a>
  <a class="works__nav-link" href="#" data-filter="inter">Interaction</a>
</div>

<div class="portfolio__col" data-cat="inter">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: interaction</div>
    </div>
  </div>
</div>
<div class="portfolio__col" data-cat="app">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: app</div>
    </div>
  </div>
</div>
<div class="portfolio__col" data-cat="website">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: websites</div>
    </div>
  </div>
</div>
<div class="portfolio__col" data-cat="app">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: app</div>
    </div>
  </div>
</div>
<div class="portfolio__col" data-cat="inter">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: interaction</div>
    </div>
  </div>
</div>
<div class="portfolio__col" data-cat="website">
  <div class="work">
    <img src="https://placehold.it/50x50" alt="">
    <div class="work__content">
      <div class="work__cat">category: websites</div>
    </div>
  </div>
</div>

Answer 1

Всегда добавляйте в вопрос разметку и код таким образом, чтобы можно было воспроизвести проблему. (Если Вы выкладываете просто код - велика вероятность, что Вам не скоро ответят или не ответят вообще).
workCat у Вас возвращает лишь один объект, который соответствует нажатому id.
Не используйте в функции forEach переменную i. Это не запрещено, но сами потом можете запутаться при других операциях.
Чтобы реализовать задуманное ищете не один, а все элементы с данном классом.
Пример:

    let filters = document.querySelectorAll('a[data-filter]');
    for (let filter of filters) {
        filter.addEventListener('click', function(e) {
            e.preventDefault();

            let catId = filter.getAttribute('data-filter');
            let workCat = document.querySelectorAll('.portfolio__col[data-cat="' + catId + '"]');
            let alldivs = document.querySelectorAll('.portfolio__col');

            alldivs.forEach(function (c) {
                if (c.getAttribute('data-cat') == catId){
                    c.classList.add('hide');
                } else {
                    c.classList.remove('hide');
                }
            })
        });
    }

    .class{
        color: #b61924;
    }
    .hide{
        display: none;
    }

<a href="" data-filter="123" class="class">123</a>
<div class="portfolio__col" data-cat="123">CAT123</div>

<a href="" data-filter="125" class="class">125</a>
<div class="portfolio__col" data-cat="125">CAT125</div>

<a href="" data-filter="126" class="class">126</a>
<div class="portfolio__col" data-cat="126">CAT126</div>

<a href="" data-filter="127" class="class">127</a>
<div class="portfolio__col" data-cat="127">CAT127</div>

БЛОГ НА HUSL

Фильтрация по категориям. JavaScript

Ответы (1 шт):