WordPress菜单筛选JS代码仅Chrome可用，Edge/Firefox/Safari失效求助

问题根源排查 #

1. HTML实体转义引发语法错误：代码中的<和>被转义成<和>（例如i < x.length），这会直接触发JavaScript语法错误。Chrome可能存在容错机制，但Edge、Firefox、Safari会直接终止代码执行。
2. 空指针错误中断流程：如果页面初始化时没有默认带active类的按钮，访问current[0]会触发undefined报错，导致后续代码无法运行。
3. 老旧className操作的兼容性隐患：手动分割、拼接className的方式容易出现空格冗余、匹配不准确等问题，不同浏览器的解析逻辑存在差异。

修复后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
  filterSelection("all");

  function filterSelection(c) {
    const elements = document.getElementsByClassName("filterDiv");
    const targetClass = c === "all" ? "" : c;
    
    for (let i = 0; i < elements.length; i++) {
      w3RemoveClass(elements[i], "show");
      if (targetClass === "" || elements[i].classList.contains(targetClass)) {
        w3AddClass(elements[i], "show");
      }
    }
  }

  function w3AddClass(element, name) {
    name.split(" ").forEach(cls => element.classList.add(cls));
  }

  function w3RemoveClass(element, name) {
    name.split(" ").forEach(cls => element.classList.remove(cls));
  }

  const btnContainer = document.getElementById("myBtnContainer");
  const btns = btnContainer.getElementsByClassName("btn");
  
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      const current = document.getElementsByClassName("active");
      if (current.length > 0) {
        current[0].classList.remove("active");
      }
      this.classList.add("active");
    });
  }
});

关键修复点说明 #

• 修正语法错误：把代码中的<替换为<，>替换为>，确保代码语法合法。
• 控制DOM加载时机：用DOMContentLoaded事件包裹代码，保证DOM元素加载完成后再执行，避免出现找不到元素的问题。
• 替换为classList API：使用classList.add()/classList.remove()/classList.contains()替代手动操作className，逻辑更清晰且兼容性更强。
• 添加空指针防护：先判断current集合长度再执行操作，避免因无默认active按钮导致的报错。

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