更改样式，然后通过第二次单击重置为原始类[重复]答案

【问题标题】：Change a style then with second click reset to original class [duplicate]更改样式，然后通过第二次单击重置为原始类[重复]
【发布时间】：2019-08-01 15:14:04
【问题描述】：

我有一个按钮，它在第一次点击时需要一些样式。但我希望用户能够通过第二次单击自己的按钮或页面中的任何按钮来重置为原始状态。

我该怎么做？

我的代码

$("#checkButton").click(function() {
  $("#checkButton").css("color", "yellow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">name 1</button>

【问题讨论】：

我建议为此使用两个或一个 CSS 类，这样您就可以检查条件然后决定设置什么。 if($('#checkButton').hasClass("yo")) {....})
以上副本回答了您的问题。但是，我也建议坚持使用类而不使用.css，然后你可以addClassremovClass 或toggleClass
发布了一些答案，但在不了解上下文的情况下，我认为它们没有用。这里的大局是什么？
添加类并使用以下代码： $(document).ready(function(){ $(window).click(function(e) { let clickedLement = e.target.id; if (clickedLement == "checkButton" && !($("#checkButton").hasClass("color-class"))) { $("#checkButton").addClass("color-class"); } else if ($( "#checkButton").hasClass("color-class")) { $("#checkButton").removeClass("color-class"); } }); });希望对你有帮助。

标签： javascript jquery html css

【解决方案1】：

我认为最好使用 class 并在每次按钮单击时使用 .toggleClass() 切换该 class。

.toggleClass() 从匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于类的存在或状态参数的值。

$("#checkButton").click(function () {
  $("#checkButton").toggleClass("colorClass");
});

.colorClass{
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">
  name 1
</button>

【讨论】：

【解决方案2】：

您可以使用 CSS 样式来实现，但如果您想在不使用 CSS 的情况下更改颜色，我在下面做了一个 sn-p。

检查当前颜色，然后设置不同的颜色。

$("#checkButton").click(function() {
  var color = $("#checkButton").css("color")
  var yellow = "rgb(255, 255, 0)"
  
  if (color !== yellow) {
    $("#checkButton").css("color", yellow);
  } else {
    $("#checkButton").css("color", "");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">name 1</button>

【讨论】：

谢谢你，我正是想要那个。

【解决方案3】：

试试这个，它会为你工作。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .my-class{
                background-color: red; 
                color: yellow; 
            }
        </style>
    </head>
    <body>
        <button id="checkButton" class="">Click Me!</button>


        <script>
            $("button").click(function () {
                $("#checkButton").toggleClass("my-class");
            });

        </script>

    </body>
</html>

【讨论】：