自定义WordPress主题首页模板中JavaScript筛选功能失效

可能的问题及解决方法 #

1. DOM未完全加载就执行代码 #

如果JS代码在页面DOM元素渲染完成前运行，document.querySelectorAll(".switcher li")会返回空集合，后续的事件绑定自然失效——这是WordPress中这类问题最常见的原因。

修复方法：
把所有代码包裹在DOM加载完成的监听回调里：

document.addEventListener('DOMContentLoaded', function() {
    let switcherLis = document.querySelectorAll(".switcher li");
    let imgs = Array.from(document.images);

    switcherLis.forEach((li)=>{
        li.addEventListener("click", removeActive);
        li.addEventListener("click", manageImgs);
    });

    function removeActive() {
        switcherLis.forEach((li)=>{
            li.classList.remove("active");
            this.classList.add("active")
        });
    }

    function manageImgs() {
        imgs.forEach((img)=>{
            img.style.display = "none";
        });
        document.querySelectorAll(this.dataset.cat).forEach((el)=>{
            el.style.display = "block";
        });
    }
});

2. this指向异常 #

虽然普通函数作为事件回调时this理论上指向点击的li，但如果代码运行在严格模式下，或存在其他上下文干扰，可能导致this指向错误，进而无法获取dataset.cat或操作类名。

修复方法：
改用事件对象的target属性获取点击元素，替代this：

function removeActive(e) {
    switcherLis.forEach((li)=>{
        li.classList.remove("active");
    });
    e.target.classList.add("active");
}

function manageImgs(e) {
    imgs.forEach((img)=>{
        img.style.display = "none";
    });
    document.querySelectorAll(e.target.dataset.cat).forEach((el)=>{
        el.style.display = "block";
    });
}

事件绑定逻辑保持不变，事件对象会自动传入回调函数。

3. data-cat属性值不是有效CSS选择器 #

代码中this.dataset.cat会直接作为选择器传入querySelectorAll，如果data-cat的值是类似web这类纯文本，而非.web或[data-category='web']这类合法CSS选择器，就无法匹配到对应图片。

检查与修复：

• 确保li标签的data-cat属性值是合法选择器，例如：

  <li data-cat=".category-web">Web作品</li>
  

• 对应图片需添加匹配的类名：

  <img src="作品链接" class="category-web" alt="Web作品">
  

4. 图片选择范围过广 #

Array.from(document.images)会选中页面所有img标签，可能误隐藏logo、导航图标等不需要筛选的图片，影响页面正常显示。

修复方法：
用更精准的选择器定位需要筛选的图片，比如给作品图片容器添加类名portfolio-images，然后修改代码：

let imgs = Array.from(document.querySelectorAll(".portfolio-images img"));

验证步骤 #

1. 打开浏览器开发者工具（F12），切换到Console标签，查看是否有报错信息（比如"Cannot read property 'addEventListener' of undefined"）。
2. 点击筛选按钮时，在Elements标签中检查对应li是否正确添加了active类。
3. 复制data-cat的属性值，在Elements标签的搜索框中搜索，确认能找到匹配的图片元素。

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