JS筛选器本地/服务器运行异常 CodePen正常 active类堆叠无法清除

原有的筛选显示/隐藏逻辑是正常的，问题出在按钮active类的操作逻辑上，核心原因如下：

• 用className.replace(" active", "")的方式移除类名，字符串replace方法默认只会替换第一个匹配项，一旦类名里出现多个重复的active，只能移除其中一个
• 匹配规则要求active前面必须带空格，如果active是类名的第一个项，或者前后空格数不规范，就会完全匹配失败，根本无法移除
• 用className += " active"的方式追加类，会在元素已经存在active类的情况下继续叠加，导致类名越来越长，触发堆叠问题

之前尝试用jQuery ready方法包裹脚本没有解决问题，是因为这种操作只解决了脚本执行时机的问题，没有修复核心的类操作逻辑缺陷，哪怕DOM完全加载完成，原有字符串替换的逻辑依然会在类名格式不规范的情况下触发堆叠。

之所以在CodePen上运行正常，是因为执行环境下类名始终处于刚好能被匹配的理想状态（active是类名的第二个项、带前导空格、无重复），bug没有暴露；本地运行时只要存在环境差异（比如其他逻辑修改了类名格式），就会直接触发类堆叠。

修复方案 #

完全替换掉用字符串拼接/替换操作类名的逻辑，改用浏览器原生的classList API操作类名，从根源上避免字符串处理的各种边界问题，同时把元素获取、事件绑定的逻辑放到DOM加载完成的回调里，避免提前执行导致的元素获取失败。

替换原来的按钮绑定事件部分代码：
原代码存在缺陷的部分：

var header = document.getElementById("myBtnContainer");
var btns = header.getElementsByClassName("btn-filter");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) { 
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}

修改为以下版本：

document.addEventListener("DOMContentLoaded", function() {
  // 确保DOM完全加载后再获取元素
  var header = document.getElementById("myBtnContainer");
  var btns = header.getElementsByClassName("btn-filter");
  
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      // 遍历所有按钮，彻底清除每个元素上的active类
      for (var j = 0; j < btns.length; j++) {
        btns[j].classList.remove("active");
      }
      // 给当前点击的按钮添加active类，自动去重
      this.classList.add("active");
    });
  }
});

方案优势 #

• 遍历所有按钮逐个清除active类，不管类名里有多少个重复的active、不管active在类名的哪个位置，都能一次性清干净
• classList.add()方法会自动判断类名里是否已经存在目标类，不会重复叠加
• 基于原生API实现，兼容所有现代浏览器，无额外依赖

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