刪除按鈕單擊jQuery的CSS樣式？

Question

我正在嘗試更改使用jquery單擊的按鈕的顏色。

我的代碼如下工作，它將擴展類添加到單擊的按鈕。 但是我需要知道如何在單擊另一個按鈕時刪除該類並向其中添加舊類，反之亦然。

現在這是我的代碼：

$(".mybtn").click(function(){
  $(this).removeClass( "mybtn" ).addClass('expand');

});  

和HTML是這樣的：

<button name='mybtn' id='mybtn' class='mybtn' value='1'>1</button>
<button name='mybtn' id='mybtn' class='mybtn' value='2'>2</button>
<button name='mybtn' id='mybtn' class='mybtn' value='3'>3</button>

CSS是具有背景顏色的簡單CSS：

.mybtn{
background-color:#fff;
}

.expand{
background-color:#000;
}

任何幫助，將不勝感激。

Answer 1

首先重置所有“擴展”類對象：

$(".mybtn").click(function(){
   // remove expand class and add original mybtn class
  $(".expand").removeClass( "expand").addClass("mybtn");

  $(this).removeClass( "mybtn" ).addClass('expand');

}); 

請參閱小提琴上的工作示例

Answer 2

$('.mybtn').toggle(function () {
    $(".mybtn").removeClass("mybtn").addClass("expand");
}, function () {
    $(".mybtn").removeClass("expand").addClass("mybtn");
});

Answer 3

嘗試這個 ：

$(".mybtn").each(function(){    
   $(this).click(function(el, ev){
      $('button#mybtn').addClass('mybtn').removeClass('expand'); 
      $(this).removeClass( "mybtn" ).addClass('expand');     
   }); 
})