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) {

    }

});

然而，当我尝试运行代码＆＃34;反向＆＃34;时，将交换机切换回另一种方式，我会出现严重的意外行为。看一下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。有更简单的方法吗？为什么我得到了我的结果？ Bootstrap的collapse插件是否会以某种方式干扰？

Answer 1

这是你想要的，如果你有多个if，你需要做其他的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/

切换开关类 - 意外行为

2 个答案: