Question

我有一个棘手的小问题。在这个例子中，我创建了两个开关和两个彩色方块：http://jsfiddle.net/amQCN/

我正在努力确保一次只能有一个开关关闭，因此总会有至少一个彩色方块显示 - 或两者。

我也一直想弄清楚;如果开关（1） on ，并且您单击开关（2），它将切换为使（2） on 和（1） off - 如上所述，您将无法关闭开关（2），但您可以将开关（1）转回 on ，这样它们都 on < / em>的

我希望这是有道理的！ - 任何人都可以建议一种方法来使这个工作？

<ul id="switches"> <li><a id="switch1" href="#">1</a></li> <li><a id="switch2" href="#">2</a></li></ul> <ul id="squares"> <li id="square1"></li> <li id="square2"></li></ul> $(function() { $('#switch1').toggle(function() { $('#square1').css("visibility", "hidden"); $('#switch1').addClass("off"); }, function(){ $('#square1').css("visibility", "visible"); $('#switch1').removeClass("off"); }); $('#switch2').toggle(function() { $('#square2').css("visibility", "hidden"); $('#switch2').addClass("off"); }, function(){ $('#square2').css("visibility", "visible"); $('#switch2').removeClass("off"); }); });

CSS

#switch1, #switch2 {background:grey; border:1px solid; border-radius:4px; color:white; cursor:pointer; display:block; float:left; margin:0 3px 5px 0; padding:6px; text-align:center; text-decoration:none; width:50px;} #switch1.off, #switch2.off {background:white; color:#ccc;} ul#squares li {float:left; margin:0 3px; padding:6px;} #square1 {background:green; height:20px; width:25px;} #square2 {background:orange; height:20px; width:25px;}

Answer 1

$(function() { 

    $('#switch1').click(function() {
        if ($('#square1').is(":visible")) {
            if ($('#square2').is(":visible")) {
                $('#square1').hide();
                $('#switch1').addClass("off");
            }
        } else {
            $('#square1').show(); 
            $('#switch1').removeClass("off");  
        }
    });

    $('#switch2').click(function() {
        if ($('#square2').is(":visible")) {
            if ($('#square1').is(":visible")) {
                $('#square2').hide();
                $('#switch2').addClass("off");
            } 
        } else {
            $('#square2').show();
            $('#switch2').removeClass("off");      
        }
    });

});

测试：http://jsfiddle.net/qzjy6/

如果您隐藏最后一个，则显示另一个：http://jsfiddle.net/wvREX/

Answer 2

你希望它如何运作？

如果开关2关闭，您想要禁用开关1关闭，还是希望开关1关闭，开关2自动开启？

如果你想禁用一个开关，那么你需要在if语句中包含隐藏它的2行，检查另一个方块的可见性（或者如果另一个开关具有Class（'off'））。

如果你想打开另一个，那么在隐藏正方形的2行之后进行检查..

Answer 3

要解决此类问题，请始终使用此方法：从您知道两个交换机状态应该是什么的位置开始。例如，您可以单击以打开按钮＃1“on”。使用此伪代码：

onclick="turnOn(button1)"

function turnOn(b) {
    setButton(button1, b === button1);
    setButton(button2, b === button2);
}

function setButton(b, on) {
    ... set button to "on" if on === true else to "off"
}

即：始终设置所有按钮的状态。不要试图聪明并创建一个“补丁”（即一组最小的变化以达到所需的目标状态）。这很脆弱，最终会失败·

jQuery - 切换两个开关，但不是两个？

3 个答案: