abdelyazy
@abdelyazy

Добавить и удалить класс js?

Добрый день! У меня в коде есть функция, по клику, которая добавляет класс hide.
const filterBox = document.querySelectorAll('.goods-card');

document.querySelector('nav').addEventListener('click', (event) => {
   if (event.target.tagName !== 'LI') return false;

   let filterClass = event.target.dataset['f'];
   
   filterBox.forEach ( elem => {
      elem.classList.remove('hide');
      if (!elem.classList.contains(filterClass)){
         elem.classList.add('hide');
      }
   });

});

Мне хотелось бы чтобы на второй клик удалялся класс hide. Как это можно реализовать?
Вот пример https://codepen.io/abdelyazy/pen/rNxEGKg (меню слева)
Заранее благодарен!
  • Вопрос задан
  • 96 просмотров
Решения вопроса 2
RAX7
@RAX7

p.s. label нельзя вкладывать в ul
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
Как-то так: https://codepen.io/FragsterAt/pen/bGEPaXq

потом тут надо сразу несколько галочек учитывать на самом деле, что еще запутает код, типа такого: https://codepen.io/FragsterAt/pen/bGEPaXq

но вообще лучше перейти на vue :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
khegay
@khegay
Founder, Garuna
const filterBox = document.querySelectorAll('.goods-card');

document.querySelector('nav').addEventListener('click', (event) => {
   if (event.target.tagName !== 'LI') return false;

   let filterClass = event.target.dataset['f'];
   
   filterBox.forEach ( elem => {
       elem.classList.toggle('hide');
   });

});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы