时间戳

首页 > 解决方案 > 更改样式，然后通过第二次单击重置为原始类

javascript - 更改样式，然后通过第二次单击重置为原始类

问题描述

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

我怎样才能做到这一点？

我的代码

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

标签： javascriptjqueryhtmlcss

解决方案

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

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

推荐阅读