切換開關類 - 意外的行爲

Question

我有一個切換開關，我試圖通過Javascript從每個按鈕添加/刪除類。對於按鈕的代碼是：

<div class="btn-group btn-toggle"> 
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target=".upload-video">Yes</button> 
    <button type="button" class="btn btn-danger active" data-toggle="collapse" data-target=".upload-video">No</button> 
</div> 

我可以讓我的JavaScript來開啓和關閉修改按鈕的第一次點擊它們，通過循環類以特定的順序，從而有從不與兩個按鈕btn-default類在同一時間：

$('.btn-toggle').click(function() { 
    if ($(this).find('.btn-danger').size()>0) { 
     $(this).find('.active').removeClass('active'); 
     $(this).find('.btn-default').addClass('btn-success'); 
     $(this).find('.btn-success').removeClass('btn-default'); 
     $(this).find('.btn-danger').addClass('btn-default'); 
     $(this).find('.btn-default').removeClass('btn-danger'); 
     $(this).find('.btn-success').addClass('active'); 
    } 
    if ($(this).find('.btn-success').size()>0) { 

    } 

}); 

然而，當我嘗試運行「反向」的代碼，切換開關後面的其他方式，我得到認真意外行爲。看看Chrome的控制檯，並觀看類的反應瘋狂：

$('.btn-toggle').click(function() { 
    if ($(this).find('.btn-danger').size()>0) { 
     $(this).find('.active').removeClass('active'); 
     $(this).find('.btn-default').addClass('btn-success'); 
     $(this).find('.btn-success').removeClass('btn-default'); 
     $(this).find('.btn-danger').addClass('btn-default'); 
     $(this).find('.btn-default').removeClass('btn-danger'); 
     $(this).find('.btn-success').addClass('active'); 
    } 
    if ($(this).find('.btn-success').size()>0) { 
     $(this).find('.active').removeClass('active'); 
     $(this).find('.btn-default').addClass('btn-danger'); 
     $(this).find('.btn-danger').removeClass('btn-default'); 
     $(this).find('.btn-success').addClass('btn-default'); 
     $(this).find('.btn-default').removeClass('btn-success'); 
     $(this).find('.btn-danger').addClass('active'); 
    } 

}); 

I have created a jsFiddle showing the problem。有沒有更簡單的方法來做到這一點？爲什麼我會得到我所做的結果？引導程序的collapse插件以某種方式干擾？

Answer 1

這是你想要的，如果你有多個if，你需要做一個else if。

http://jsfiddle.net/6s9Ab/

else if ($(this).find('.btn-success').size() > 0) { 

Answer 2

你可以這樣說：

$('.btn-toggle').children().click(function() { 
    if(!$(this).hasClass('active')) { 
     $a = $(this); 
     $b = $(this).parent().find('.active'); 
     if($b.hasClass('btn-danger')) { 
      $a.removeClass('btn-default').addClass('btn-success').addClass('active'); 
      $b.removeClass('btn-danger').removeClass('active').addClass('btn-default'); 
     } else { 
      $a.removeClass('btn-default').addClass('btn-danger').addClass('active'); 
      $b.removeClass('btn-success').removeClass('active').addClass('btn-default'); 
     } 
    } 
}); 

小提琴：http://jsfiddle.net/Hive7/gP562/4/