jQuery - переключить два переключателя, но не оба? - PullRequest
Новая
       3

jQuery - переключить два переключателя, но не оба?

1 голос
/ 04 мая 2011

У меня каверзная маленькая проблема. В этом примере я создал два переключателя и два цветных квадрата: http://jsfiddle.net/amQCN/

Я пытаюсь убедиться, что только один переключатель может быть выключен одновременно, поэтому всегда отображается хотя бы один цветной квадрат - или оба .

Я тоже пытался понять; если переключатель (1) установлен на на , и вы нажимаете переключатель (2), он переключается на (2) на и (1) на - как указано выше тогда вы не сможете выключить переключатель (2) , но можете включить переключатель (1) обратно на , чтобы они оба были включены .

Надеюсь, это имеет смысл! - Кто-нибудь может предложить метод, чтобы заставить это работать? 

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

Ответы [ 3 ]

2 голосов
/ 04 мая 2011 
$(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/

1 голос
/ 04 мая 2011

Чтобы атаковать подобные проблемы, всегда используйте такой подход: начните с того места, где вы знаете, каким должно быть состояние двух коммутаторов.Например, у вас есть место, где можно нажать кнопку «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"
}

То есть: всегда устанавливайте состояние для всех кнопок.Не пытайтесь быть умным и создавать «патч» (то есть минимальный набор изменений для достижения желаемого целевого состояния).Это хрупкое и в конечном итоге потерпит неудачу ·

1 голос
/ 04 мая 2011

как вы хотите, чтобы он работал?

Если переключатель 2 выключен, хотите ли вы отключить отключение переключателя 1 или выключить переключатель 1 и включить 2 автоматически?

если вы хотите отключить переключатель, вам нужно обернуть 2 строки, которые скрывают его, внутри оператора if, проверяющего видимость другого квадрата (или если другой переключатель имеет класс («выключен»)).

Если вы хотите включить другой, сделайте эту проверку после 2 строк, которые скрывают квадрат.

...