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

【问题标题】：jQuery - Toggle two switches but not both?jQuery - 切换两个开关，但不是两个？
【发布时间】：2011-05-04 08:39:23
【问题描述】：

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

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

我也一直在想办法；如果开关 (1) on，并且您单击开关 (2)，它会切换到 (2) on 和 (1) off - 如上所述，您将无法将开关 (2)off 转回，但您可以将开关 (1) 转回 on，这样它们都 on。

我希望这是有道理的！ - 任何人都可以提出一种方法来让它工作吗？

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

【问题讨论】：

虽然实时示例链接是一个很好的辅助问题，但始终将相关代码实际发布到问题本身中。人们不必通过链接来帮助您，外部链接可以被移动、修改、删除等。（请记住，StackOverflow 旨在为将来遇到类似问题的人提供资源，而不仅仅是您现在的问题. 因此确定整个事情仍然存在。）
好点，我现在更新问题。

标签： jquery toggle switch-statement

【解决方案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/

【讨论】：

完美，这正是我的意思。不敢相信大家的反应这么快！非常感谢您的帮助。

【解决方案2】：

你希望它如何工作？

如果开关 2 关闭，您要禁用开关 1 的关闭，还是希望开关 1 关闭并自动打开开关 2？

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

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

【讨论】：

您好，为您的回答喝彩。基本上，我试图避免两个方块都“关闭”，同时如果另一个方块被按下，它们也会切换。

【解决方案3】：

要解决此类问题，请始终使用以下方法：从您知道两个开关的状态应该是什么的地方开始。例如，您有一个地方可以单击以“打开”按钮 #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"
}

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

【讨论】：