jquery - 如何使用 jQuery 中的切换按钮返回到原始状态？

Question

我有一个这样的按钮，

<button class = "btn btn-group" data-toggle = "buttons" id="button" type = "button">
   <span class="glyphicon glyphicon-star" id="star"></span>
</button>

当我点击这个按钮时，我添加了一个名为 .yellow 的新 CSS 类来像这样使用 jQuery 更改按钮的颜色，

<script type = "text/javascript">
   $(function () {
      $("#button").click(function(){
        $("#star").addClass("yellow");
      });
   });

</script>

现在，当我再次单击时，我想删除 .yellow CSS 类。如何使用 jQuery 实现这一点？

这是我目前获得的代码的链接 - http://jsbin.com/dulamikiqu/edit?html,output

Answer 1

您可以执行以下操作:

$("#star").toggleClass("yellow");

.toggleClass()用于向元素添加类，然后在该元素再次发生事件(例如点击)时再次删除它。