jQuery：尝试创建“if else”语句利用“noop”使链接无效 - 不起作用

Question

最终，我试图使链接在按下并调出相关 div 后不起作用（我希望链接在相关 div 未显示时再次起作用）。页面不会重新加载，因为链接只会更改 div 显示的内容。

---

我有四个链接（“linkSweaters”、“linkService”、“linkContact”和“linkSeamstress”）对应于四个 div（“rightContentSweaters”、“rightContentService”、“rightContentContact”和“rightContentSeamstress”）。在任何时候，只应显示一个 div，而所有其他 div 应为 css: 'display:none'。我还有一个“rightContentSpacer” div，当我单击任何一个链接时，它的高度会增加 - 从而重叠当时显示的 div，一旦重叠，我就可以消失 - 然后再次缩小以发现与推送的链接相对应的 div（当“rightContentSpacer”与前一个 div 重叠时，我会显示该链接，从而实现从一个 div 到另一个 div 的转换）。

我的问题： 当我点击一个链接（例如'linkSweaters'）时，我不想点击同一个链接随后激活jQuery动画，因为相关的div已经显示（即'rightContentSweaters'） - 即当'rightContentSweaters'显示时我希望“linkSweaters”链接在单击时不执行任何操作。

如下所示（就在下面的 jQuery 代码的底部），为了让点击链接什么都不做，我尝试了 ' $("#linkSweaters").noop();';这取决于其他三个 div（'rightContentService'、'rightContentContact' 和 'rightContentSeamstress'）没有显示，即 css:'display:none'。这个想法是，如果其他三个 div 没有显示，那么这意味着（因为任何时候都必须显示一个 div）必须显示“rightContentSweaters”。

尽管如此，在我原来的 CSS 中，三个 div（“rightContentSweaters”、“rightContentSeamstress”和“rightContentContact”）在页面最初加载时以“display:none”开头；一个 div ('rightContentService') 不会以 'display:none' 开始，因为它已经显示：

#rightContentService {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:block;
                }

 #rightContentSweaters {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }

因此我在底部添加了一点 jQuery 代码（即具有延迟功能的位），这样一旦我点击了与原始页面不同的链接，'rightContentService' 就变成了 'display:none ';然后所有三个 div 的条件都是“显示：无”将起作用。

我的jQuery如下：

$("#linkSweaters").click(function(){
    if ($('#rightContentService').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentContact").animate({
        height: "0",
        },1000);
    $("#rightContentContact").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
        height: "10%",
        },1000);

} else if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentSeamstress").animate({
        height: "0",
        },1000);
    $("#rightContentSeamstress").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
        height: "10%",
        },1000);

} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentService").animate({
        height: "0",
        },1000);
    $("#rightContentService").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
       height: "10%",
       },1000);

} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none' && $('#rightContentService').css('display') == 'none'){
    $("#linkSweaters").noop();

    }

$('#rightContentService').delay(1000).queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
    });

});

它不起作用 - 在显示“rightContentSweaters”后，我仍然可以点击“linkSweaters”。所以看起来要么（A）'noop'不起作用，要么（B）我的三条件（x && y && z）不起作用。

你怎么看？

Answer 1

这不是noop 方法的作用。它所做的实际上完全没有。

noop 方法旨在用于需要调用函数的地方，但调用该函数不应该做任何事情。不用创建一个新的空函数，即function(){}，你可以使用$.noop。

如果要从元素中移除点击事件处理程序，可以使用off 方法：

$("#linkSweaters").off('click');