jQuary 开启和关闭事件但相同的按钮

Question

我想在按下时制作一个按钮来更改我页面的背景颜色。然后，当您再次按下它时，它会恢复到原来的状态。我不明白如何让它再次恢复到原来的颜色（使用拨动开关）。

---

$(function () {
    $("#button").click(function () {
        $("p").css("background-color", "red");
    });
});

Answer 1

理想情况下，您会为此使用 classes，这很容易切换。例如：

$(function () {
  $("#button").click(function () {
    $("p").toggleClass("red");
  });
});

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Test</p>
<button id="button" type="button">Click</button>

---

如果您必须使用直接样式规则，那么一种方法是将原始值存储在某处。然后在点击处理程序中，只需将当前值与原始值进行比较，然后以一种或另一种方式更改它。例如：

$(function () {
  const original = $("p").css("background-color");
  
  $("#button").click(function () {
    const current = $("p").css("background-color");
    if (current === original) {
      $("p").css("background-color", "red");
    } else {
      $("p").css("background-color", original);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Test</p>
<button id="button" type="button">Click</button>