jquery - 带有 ELSE 条件的 jQuery 函数

Question

这是 jQuery 大师的一个简单问题。

你可以在这里找到一个工作小提琴

如您所见，有一个带有id="hideme". 我希望当我点击link2它id时隐藏，但条件是当我点击时link1它link3必须再次可见。

所以我认为它必须是 } ELSE {或者在jQuery中是不可能的？

$('#link2').click(function(){
    if(jQuery('#link2').data('clicked')) {
        $('#hideme').hide();
    } else {
        $('#hideme').show();
    };
});

Answer 1

您的click侦听器仅附加到#link2. 您想检测何时单击任何链接，然后进行测试。像这样：

$('a').click(function(){
    if(this.id === 'link2') {
        $('#hideme').hide();
    } else {
        $('#hideme').show();
    };
});

Answer 2

没有必要以这种方式使用 else 语句，因为 jQuery 在它的事件绑定中非常具有隧道视野。将某个事件绑定到某个元素，这将会发生。如果您希望在另一种情况下发生另一个事件，只需将其定义为这样。话虽如此，您可以像这样在 jQuery 中使用 javascript 语句：

if(x = 0)
{
    $("div").hide();
} 
else
{
    $("div").show();
}

但是在这种情况下，您正在对某些外部变量使用逻辑运算符。绑定事件时，这是完全没有必要的。试试看一下 toggle() 功能。这是一个简单的例子：

$("#id").click(function() {
    $("#MyDiv").toggle();
});

Answer 3

无法通过将事件绑定到“#link2”来完成，但可以通过其他两种不同的方式完成：

$('#link2').click(function(){
    $('#hideme').hide();
});

$('#link1, #link3').click(function(){
    $('#hideme').show();
});

或者

$('ul a').click(function() {
    if ($(this).attr('id') == 'link2') {
        $('#hideme').hide();
    }
    else {
        $('#hideme').show();
    }
});

Answer 4

您需要绑定单独的事件：

$('#link2').click(function() {
    $('#hideme').hide();
});

$('#link1, #link3').click(function() {
    $('#hideme').show();
});

我实际上会让 link1 和 link3 有一个公共类来使选择“更简单”。

Answer 5

您需要将click事件绑定到所有链接并在handler.

现场演示

$('[id^=link]').click(function () {    
    if (this.id == 'link2') $('#hideme').hide();
    else if (this.id == 'link1' || this.id == 'link2') $('#hideme').show();
});