JQuery类移除异常：点击按钮切换.sidebarActive类失效问题排查

我看了你这段代码，问题其实出在两个关键细节上，咱们一步步拆解：

核心问题1：混用原生DOM API与jQuery方法 #

你在hideActive()里用document.querySelectorAll()拿到的是原生DOM元素集合，但原生DOM元素并没有removeClass()这个方法——这是jQuery专门封装的操作类名的方法，只有jQuery对象才能调用它。

核心问题2：removeClass()的参数格式错误 #

就算是jQuery对象调用removeClass()，也不需要在类名前面加.，直接写类名sidebarActive就行。带点的写法是CSS选择器的规则，不是操作类名时的用法。

修正后的代码方案 #

这里给你两种可选的修正思路，选顺手的用就行：

方案1：全程用jQuery（更简洁）

$(".sidebarButton").click(function() {
  // 先移除所有按钮的active类
  $(".sidebarButton").removeClass('sidebarActive');
  // 再给当前点击的按钮添加active类
  $(this).addClass('sidebarActive');
});

这种写法直接用jQuery选择器选中所有按钮，一步完成移除操作，比单独写函数更简洁直观。

方案2：修复原生DOM的写法（如果想坚持用原生API）

$(".sidebarButton").click(function() {
  hideActive();
  $(this).addClass('sidebarActive');
});

function hideActive() {
  var sidebars = document.querySelectorAll(".sidebarButton");
  for (var i = 0, l = sidebars.length; i < l; i++) {
    // 原生DOM用classList.remove来移除类，类名不带点
    sidebars[i].classList.remove("sidebarActive");
  }
}

这里把错误的removeClass()换成了原生DOM的classList.remove()方法，同时去掉了类名前的.，就能正常实现移除类的功能了。

额外小优化建议 #

其实jQuery还有更优雅的链式写法，用siblings()只操作当前按钮的兄弟元素，性能会更好（不用选中所有按钮）：

$(".sidebarButton").click(function() {
  $(this).addClass('sidebarActive').siblings('.sidebarButton').removeClass('sidebarActive');
});

点击时，给当前按钮加类的同时，直接移除它所有同层级的.sidebarButton兄弟元素的active类，逻辑更清晰~

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