jQuery:试图使 'if else' 语句利用 'noop' 使 link 惰性 - 不起作用

jQuery: attempting to make an 'if else' statement utilise 'noop' to make link inert - not working

最终,我试图让 link 在按下并调出相关的 div 后不起作用(我希望 link 在相关的 div 没有显示)。页面不会重新加载,因为 link 只会更改 div 正在显示的内容。


我有四个 link('linkSweaters'、'linkService'、'linkContact' 和 'linkSeamstress')对应于四个 div( 'rightContentSweaters'、'rightContentService'、'rightContentContact' 和 'rightContentSeamstress')。在任何时候,只应显示一个 div,而所有其他 div 应显示为 css:'display:none'。我还有一个 'rightContentSpacer' div,当我点击任何一个 link 时它会增加高度 - 从而与当时显示的 div 重叠,一旦重叠,我就可以消失 - 然后再次收缩以发现与推入的 link 相对应的 div (当 'rightContentSpacer' 与前一个 div 重叠时我会出现,从而实现从一个 div 到另一个的转换)。

我的问题: 当我单击 link(例如 'linkSweaters')时,我不想单击相同的 link 随后激活 jQuery 动画作为相关 div 已经显示(即 'rightContentSweaters')- 即当显示 'rightContentSweaters' 时,我希望 'linkSweaters' link 在单击时不执行任何操作。

如下(在下面 jQuery 代码的底部),为了让点击 link 什么都不做我试过 ' $("#link毛衣").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 代码位(即具有延迟功能的位),这样一旦我点击了与原始代码不同的 link页面,'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(); 
    });

});

它不起作用 - 在显示 'rightContentSweaters' 的情况下,我仍然可以点击 'linkSweaters'。所以看起来要么 (A) 'noop' 不工作,要么 (B) 我的三条件 (x && y && z) 不工作。

你怎么看?

这不是 noop 方法的作用。它的作用其实完全没有。

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

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

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