jQueryのトグルボタンで元の状態に戻るにはどうすればいいですか？

Question

私は、このようなボタンを持っている私は、このボタンをクリックすると

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

、私は今

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

</script> 

、このようにjQueryを使用して、ボタンの色を変更する.yellowと呼ばれる新しいCSSクラスを追加もう一度クリックすると、.yellow CSSクラスが削除されます。これをjQueryでどうやって行うことができますか？

は、ここで私はこれまで持っているコードへのリンクです - http://jsbin.com/dulamikiqu/edit?html,output

Answer 1

次の操作を行うことができます：

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

.toggleClass()をするために使用されています要素にクラスを追加した後、クリックなどのイベントが発生したときに再度削除するその要素をもう一度。

Answer 2

使用.toggleClass()

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