Mi problema es que cuando hago clic en mis botones, no eliminan la ocultación, solo funciona con "todos", también traté de cambiar getElementsByClassName() en lugar de querySelectorAll.
No tengo idea de que mas hacer. :(
No puedo mostrar el HTML porque dice que tengo demasiado código y necesito agregar más detalles, pero estoy bastante seguro de que el HTML es correcto.
JS
let list = document.getElementsByClassName('list'); let itemBox = document.getElementsByClassName('itemBox'); for (let i = 0; i < list.length; i++) { list[i].addEventListener('click', function(){ for (let j = 0; j < list.length; j++) { list[j].classList.remove('active'); } this.classList.add('active'); let dataFilter = this.getAttribute('data-filter'); for (let k = 0; k < itemBox.length; k++) { itemBox[k].classList.remove('active'); itemBox[k].classList.add('hide'); if(itemBox[k].getAttribute('data-item') == dataFilter || dataFilter == "all"){ itemBox[k].classList.remove('hide'); itemBox[k].classList.add('active'); } } }); }Voy a llorar, esta es mi primera vez aquí :')
En lugar de usar 2 clases ocultas y activas, ¿qué tal simplificar para usar solo 1 clase active ? Luego puede usar this.classList.toggle('active') , esto agregará 'active' si no hay active en la lista de clases y eliminará 'active' si hay active en la lista de clases.