开发可筛选图片画廊点击按钮触发classList读取null的TypeError错误求助

问题根源 #

1. 初始无active元素触发TypeError
   页面加载时没有任何按钮带有active类，第一次点击按钮时，document.querySelector('section.btns .active')返回null，执行currentTab.classList.remove('active')时就会抛出Cannot read properties of null (reading 'classList')错误，直接中断后续代码执行，导致按钮点击无反应。

2. data属性大小写不匹配导致筛选失效
   部分data-item值的大小写与data-filter不一致（比如data-item="Shoe" vs data-filter="shoe"），JavaScript是大小写敏感语言，这会导致筛选逻辑无法正确匹配对应项目。

修复步骤及代码 #

1. 修改HTML代码

给默认选中的「All」按钮添加active类，同时统一data-item的大小写与data-filter保持一致：

<html>
<head>
</head>
<body>
<main class="Container">
   <section class="btns"> 
        <ul>
            <li class="btn active" data-filter="all">All</li>
            <li class="btn" data-filter="shoe">Shoes</li>
            <li class="btn" data-filter="clothe">Clothes</li>
            <li class="btn" data-filter="hat">Hats</li>
        </ul>
    </section>
    <section class="gallery">
        <div class="prod" data-item="hat">
            <div class="imgBox">
                <img src="Prod1.png">
            </div>
        </div>
        <div class="prod" data-item="shoe">
            <div class="imgBox">
                <img src="Prod2.png">
            </div>
        </div>
        <div class="prod" data-item="clothe">
            <div class="imgBox">
                <img src="Prod3.png">
            </div>
        </div>
   </section>
</main>
</body>
</html>

2. 优化JavaScript代码

增加null判断保证健壮性，统一转小写避免大小写问题，同时简化遍历逻辑：

const allFilters = document.querySelectorAll('section.btns li.btn');
const allCards = document.querySelectorAll('section.gallery div.prod');

allFilters.forEach(filterBtn => {
    filterBtn.addEventListener('click', myFunction);
});

function myFunction(){
    const currentActiveBtn = document.querySelector('section.btns .active');
    if (currentActiveBtn) {
        currentActiveBtn.classList.remove('active');
    }
    this.classList.add('active');

    const targetFilter = this.getAttribute('data-filter').toLowerCase();

    allCards.forEach(item => {
        const itemCategory = item.getAttribute('data-item').toLowerCase();
        if (targetFilter === 'all' || itemCategory === targetFilter) {
            item.classList.remove('hide');
            item.classList.add('active');
        } else {
            item.classList.add('hide');
            item.classList.remove('active');
        }
    });
}

额外提示 #

确保CSS中定义了.hide类，否则筛选后项目不会隐藏：

.hide {
    display: none;
}

内容的提问来源于stack exchange，提问作者Jomazz