更改样式，然后通过第二次单击重置为原始类[重复]
Posted
技术标签:
【中文标题】更改样式，然后通过第二次单击重置为原始类[重复]【英文标题】：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"); ); );希望对你有帮助。
【参考方案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>
【讨论】：
以上是关于更改样式，然后通过第二次单击重置为原始类[重复]的主要内容，如果未能解决你的问题，请参考以下文章