jQuery点击按钮切换元素背景色时addClass/removeClass仅生效一次问题

问题根因 #

• 第一，jQuery的hasClass()方法不支持逗号分隔的多类名判断，你传入"silver, white"会被识别为判断元素是否存在一个叫silver, white的完整类名，而不是分别判断两个类是否存在，这是逻辑失效的核心原因。
• 第二，分支逻辑错误：你把「移除其他类」和「添加当前类」放在if-else的互斥分支里，导致只要判断不成立，就只会新增当前类，旧的颜色类永远不会被移除。

最小改动修复方案 #

直接去掉多余的if判断，每次点击对应按钮时，先移除另外两个颜色类，再添加当前选中的颜色类即可，注意removeClass的多类名用空格分隔：

jQuery(document).ready(function() {
  jQuery(".btn input[value='black']").click(function() {
    jQuery("div.box").removeClass("silver white").addClass("black");
  });

  jQuery(".btn input[value='silver']").click(function() {
    jQuery("div.box").removeClass("black white").addClass("silver");
  });

  jQuery(".btn input[value='white']").click(function() {
    jQuery("div.box").removeClass("black silver").addClass("white");
  });
});

更精简的通用实现（推荐） #

不需要给每个按钮单独绑定事件，统一绑定即可，后续新增颜色选项只需要改HTML，不用调整JS逻辑：

jQuery(document).ready(function() {
  jQuery(".btn input").click(function() {
    const currentColor = jQuery(this).val();
    jQuery("div.box").removeClass("black silver white").addClass(currentColor);
  });
});

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