带分类筛选功能的图库点击分类仅显示单张图片问题求助

问题原因 #

• 核心错误是使用了document.querySelector()方法匹配分类元素，该方法仅返回第一个符合条件的DOM节点，因此仅能展示1张对应分类的图片
• 未对「All」全部分类做特殊逻辑处理，点击All标签时会因找不到对应选择器元素抛出报错

修复方案 #

将原有<script>标签内的逻辑替换为以下代码即可：

let filtern=document.querySelectorAll(".liste");
let filterArray=Array.from(filtern);
let divs=document.querySelectorAll(".product>div");
let divArray=Array.from(divs);

for(i=0; i<filterArray.length;i++){
    filterArray[i].addEventListener("click",(e)=>{
        let clicko=e.currentTarget;
        // 切换分类激活状态
        for(i=0; i<filterArray.length;i++){
            filterArray[i].classList.remove("active")
        }
        clicko.classList.add("active")
        
        const filterKey = clicko.dataset.filter;
        if(filterKey === 'All'){
            // 全部分类展示所有图片
            divArray.forEach(item => item.style.display = 'block')
        }else{
            // 先隐藏所有图片，再批量展示匹配当前分类的所有图片
            divArray.forEach(item => item.style.display = 'none')
            document.querySelectorAll(filterKey).forEach(item => item.style.display = 'block')
        }
    })
}

改动说明 #

• 用document.querySelectorAll()替代原有的querySelector()，匹配所有符合分类条件的图片元素后批量设置展示状态
• 新增All分类的判断逻辑，点击全部分类时直接展示所有图片
• 优化了激活类切换的逻辑，避免循环内重复给当前点击元素添加active类

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