如何在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()用于向元素添加类，然后在事件（例如点击）再次发生在该元素上时再次删除它。

Answer 2

使用.toggleClass()

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