切换开关类 - 意外的行为

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/