jQuery实现按钮切换标题颜色时从紫色切回红色失效求助

问题原因 #

你遇到的切色失效根本不是jQuery的问题，是本身逻辑和CSS规则踩了两个非常常见的坑：

• 现在所有按钮的点击事件只做「给标题加颜色类」的操作，从来没把之前加上的类删掉。你先后点过几个按钮后，标题元素上会同时挂着红、绿、黄、紫四个类。
• 同优先级的CSS规则，写在后面的会覆盖前面的。你定义类的顺序是红→绿→黄→紫，只要紫色类一直留在元素上，不管后续加多少红、绿、黄的类，紫色样式都会压着所有前面的颜色，自然切不回红色。另外你写的紫色类的CSS规则少了个闭合大括号，本身样式代码就是不完整的。

解决方法 #

点击按钮切色的时候，先把所有跟颜色相关的类全从标题元素上删掉，再加当前要切换的颜色类，别让多个颜色类堆在同一个元素上互相覆盖。

修正后的完整可运行代码：

<style>
body { font-weight: 400; }
.red { color: red; }
.green { color: green; }
.yellow { color: yellow; }
/* 补全原代码缺失的闭合大括号 */
.purple { color: purple; }
</style>

<h1 id="heading1">这是一个标题！</h1>
<button id="red">Red</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="purple">Purple</button>

<script>
// 把所有用到的颜色类存在数组里，方便一次性统一清除
const allColorClasses = ['red', 'green', 'yellow', 'purple'];

$("#red").click(function () {
  // 先清掉所有旧的颜色类
  $("#heading1").removeClass(allColorClasses);
  // 再加当前需要的颜色类
  $("#heading1").addClass("red");
});

$("#green").click(function () {
  $("#heading1").removeClass(allColorClasses);
  $("#heading1").addClass("green");
});

$("#yellow").click(function () {
  $("#heading1").removeClass(allColorClasses);
  $("#heading1").addClass("yellow");
});

$("#purple").click(function () {
  $("#heading1").removeClass(allColorClasses);
  $("#heading1").addClass("purple");
});
</script>

实用小优化：不用每个按钮都写一遍重复的删类逻辑，给所有切色按钮加个通用类，绑定同一个点击事件，靠按钮ID匹配对应的颜色类，能省掉很多重复代码。

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