javascript - 切换开关类——意外行为

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 的控制台并观察类的疯狂 react :

$('.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 .有没有更简单的方法来做到这一点？为什么我会得到我所做的结果？ Bootstrap 的 collapse 插件是否以某种方式干扰？

Answer 1

这是你想要的吗，在 javascript 中，如果你有多个 if，你需要做一个 else if。

http://jsfiddle.net/6s9Ab/

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