Javascript 圖庫：單擊按鈕不會刪除隱藏

Question

我的問題是當我單擊我的按鈕時，它們不會刪除隱藏，它只適用於“全部”，我也嘗試更改 getElementsByClassName() 而不是 querySelectorAll。

我不知道還能做什么。 :(

我無法顯示 HTML 因為它說我有太多代碼需要添加更多細節，但我很確定 HTML 是正確的。

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');
            }
        }
    });
}

我要哭了，這是我第一次來這里：'）

Answer 1

與其使用 2 個 class 隱藏和激活，不如簡化為僅使用 1 個 class active如何？ 然后你可以使用this.classList.toggle('active') ，如果 classList 中沒有active ，這將添加'active' ，如果 classList 中有active ，則刪除'active' 。

https://www.w3schools.com/howto/howto_js_toggle_class.asp