Question

我想要一个简单的通断开关，当我点击关闭开关时，开启会变为停用状态，同样当我点击开关时。

我尝试了以下代码，但是我第一次切换时工作正常，但是第二次点击事件时第二次工作。

我做的jquery：

 var offbtnpress = true;

    $('.offbtn').click(function () {
        if (offbtnpress) {
            $(this).removeClass('btn-default1').addClass('btn-primary');
            $(this).next('.onbtn').removeClass('btn-primary').addClass('btn-default1');
        }
        else {
            $(this).removeClass('btn-primary').addClass('btn-default1');
            $(this).next('.onbtn').removeClass('btn-default1').addClass('btn-primary');
        }
        offbtnpress = !offbtnpress;
    });

    var onbtnpress = true;

    $('.onbtn').click(function () {
        if (onbtnpress) {
            $(this).removeClass('btn-default1').addClass('btn-primary');
            $(this).prev('.offbtn').removeClass('btn-primary').addClass('btn-default1');
        }
        else {
            $(this).removeClass('btn-primary').addClass('btn-default1');
            $(this).prev('.offbtn').removeClass('btn-default1').addClass('btn-primary');
        }
        onbtnpress = !onbtnpress;
    });

HTML：

 <span class="btn btn-default1 pull-right borderrad2 offbtn" style="margin: 0 !important">Off</span>
                                        <span class="btn btn-primary pull-right borderrad1 onbtn" style="margin: 0 !important">On</span>

请看小提琴：https://jsfiddle.net/2hLdyajp/2/

提前致谢

Answer 1

为什么不这样做：

$('.offbtn, .onbtn').click(function () {
    $('span.btn').toggleClass('btn-primary btn-default1')
});

<强> jsFiddle example

Answer 2

仅使用一个变量来跟踪切换状态：

https://jsfiddle.net/spefhykp/

var offbtnpress = true;

$('.offbtn').click(function () {
    if (offbtnpress) {
        $(this).removeClass('btn-default1').addClass('btn-primary');
        $(this).next('.onbtn').removeClass('btn-primary').addClass('btn-default1');
    }
    else {
        $(this).removeClass('btn-primary').addClass('btn-default1');
        $(this).next('.onbtn').removeClass('btn-default1').addClass('btn-primary');
    }
    offbtnpress = !offbtnpress;
});

//    var onbtnpress = true;

$('.onbtn').click(function () {
    if (!offbtnpress) {
        $(this).removeClass('btn-default1').addClass('btn-primary');
        $(this).prev('.offbtn').removeClass('btn-primary').addClass('btn-default1');
    }
    else {
        $(this).removeClass('btn-primary').addClass('btn-default1');
        $(this).prev('.offbtn').removeClass('btn-default1').addClass('btn-primary');
    }
    offbtnpress = !offbtnpress;
});

Answer 3

我写了一个类似于@ j08691提交的解决方案，但我试图让它更通用。

https://jsfiddle.net/2hLdyajp/8/

HTML：

<span class="buttons noselect">
    <span class="btn btn-default pull-right borderrad2" style="margin: 0 !important">Off</span>
    <span class="btn btn-default pull-right borderrad1 btn-primary" style="margin: 0 !important">On</span>
</span>

我将按钮放在包含它们的范围内，按钮之间唯一不同的是borderrad和btn-primary。无论什么类是主要的将是选定的。

JS：

$('.buttons').click(function () {
    $(this).children().toggleClass('btn-primary');
});

toggleClass负责检查对象的当前类，因此您不需要将其存储为布尔变量。如果要在其中包含更多按钮，此方法也将起作用。当然，我需要先改变CSS。

如果您需要找出按下了哪个按钮，请改用此小提琴：http://jsfiddle.net/2hLdyajp/9/

第一次点击时，第二次活动无效

3 个答案: