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过渡到另一个)。

我的问题:当我已经点击了一个链接(例如'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的条件都是'display:none'就可以工作了。

我的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(); 
    });
});

它不起作用-我仍然可以点击'linkSweaters'后已经点击它与'rightContentSweaters'显示。所以看起来是(A)'noop'不起作用，或者(B)我的三条件(x &&y,和Z)不起作用。

你觉得怎么样?

Answer 1

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

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

如果您想从元素中删除click事件处理程序，您可以使用off方法:

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