Question

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

我该怎么做？

我的代码

$("#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>

Answer 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>

Answer 2

尝试一下，它将为您服务。

<!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>

Answer 3

您可以使用CSS样式来做到这一点，但是如果您想在不使用CSS的情况下更改颜色，我已经做了一个摘要。

检查当前颜色，然后设置其他颜色。

$("#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 个答案: