Question

当我尝试从红色点击到紫色时我可以改变颜色，但是当我从紫色点击到红色按钮时 jQuery 似乎没有改变颜色。请帮忙。

body { font-weight: 400; } .red { 颜色：红色； } .green { 颜色：绿色； } .yellow { 颜色：黄色； } .purple { 颜色：紫色；

这是标题！

<!-- <a href="http://jquery.com">jQuery</a> -->
<button id="red">Red</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="purple">Purple</button>

<script>
     $("#red").click(function () {
     $("#heading1").addClass("red");
  });

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

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

  $("#purple").click(function () {
    $("#heading1").addClass("purple");
  });

Answer 1

我希望你可以尝试分享。使用 removeClass 就可以了

    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
body { font-weight: 400; } .red { color: red; } .green { color: green; } .yellow { color: yellow; } .purple { color: purple;


</style>

<h1 id="heading1">This is a Heading</h1>

<!-- <a href="http://jquery.com">jQuery</a> -->
<button id="red">Red</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="purple">Purple</button>

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

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

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

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

Answer 2

如果你想改变背景颜色，你必须使用：Function

当我尝试从红色点击到紫色时，我可以改变颜色，但是当从紫色到红色按钮开始时，jQuery 似乎没有改变颜色

2 个答案: