jQuery - 切换两个开关但不能同时切换两个？

Question

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

我试图确保一次只能关闭一个开关，因此总是至少有一个彩色方块显示 - 或两者。

我也一直在试图弄清楚；如果开关 (1) 打开，并且您单击开关 (2)，它会切换为 (2) 打开 和 (1) 关闭 - 如上所述，您将无法关闭开关 (2) 关闭，但您可以将开关 (1) 重新打开打开，这样它们都打开< /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

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

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"
}

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

Answer 2

你希望它如何运作？

如果开关 2 关闭，您想要禁止开关 1 关闭，还是希望开关 1 关闭而开关 2 自动打开？

如果你想禁用一个开关，那么你需要将隐藏它的两行代码包含在 if 语句中，检查另一个方块的可见性（或者另一个开关是否 hasClass('off')）。

如果您想打开另一个，请在隐藏方块的两行之后进行检查。

Answer 3

$(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/