Question

我正在尝试使用下面的代码为我的页面内容创建jQuery fadeIn淡出效果。

$(document).ready(function (){
$("#main").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("main.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

$("#gallery").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("gallery.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

});

因此，无论何时用户点击主链接或图库链接，旧内容都会淡出，新内容会淡入。我面临的问题是，对于每个链接，我必须一次又一次地重复相同的代码。所以我尝试使用循环来简化这一点，但它不起作用。这是我的代码：

var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++){
    $(p[i]).click(function(){
    $("#content").fadeOut(500, function(){
        $("#content").load(q[i], function(){
            $("#content").fadeIn(500);
        });
    });
});
}

当我为每个链接重复编写脚本时它工作正常但是当我在循环中组合它时它不起作用。我只获得了FadeOut效果，之后没有任何反应。

这可能是一个非常简单的问题，也可能是jQuery的深层次问题。非常感谢任何提示或帮助。

TK

Answer 1

你的i变量总是在3处求值，这使q [i]未定义。你必须找到一种方法，就像一个类可能会保持与回调相关联的数字。

如果真的只是三个链接，我会建议一些更简单的案例陈述。

switch $(this).attr('id') {
    case 'gallery' : ; break;
    case 'contact' : y; break;
    case 'main' : z; break;
}

如果您担心代码重复，只需编写一个函数来接受要加载的页面，并在每个.click（）中调用它。

Answer 2

您必须在单独的闭包中捕获i或q[i]的当前值，例如：

function buildChangeOverTo(src)
{
    return function() {
        var content = $("#content");
        content.fadeOut(500, function(){
           content.load(src, function(){
               content.fadeIn(500);
        }});
    }
}

var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++) {
    $(p[i]).click(buildChangeOverTo(q[i]));
}

网上有大量关于这些奇怪的javascript闭包的信息。

Answer 3

我会通过在链接中添加一个类来解决这个问题，比如fadeLink，我会像fadeUrl一样为链接添加一个自定义属性。我会将链接目标设置为每个链接上的fadeUrl属性，然后您的文档就绪代码可能如下所示：

$(document).ready(function (){
    $(".fadeLink").click(function(){
        var jqThis = $(this);
        $("#content").fadeOut(800, function(){
            $("#content").load(jqThis.attr("fadeUrl"), function(){
                $("#content").fadeIn(800);
            });
        });
    });
});

这将会绕过循环并在将来添加或编辑链接，您只需要更改链接上的数据。

JQuery淡入fadeOut循环问题

3 个答案: