1

我正在尝试使用下面的代码为我的页面内容创建一个 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 的深层内容。非常感谢任何提示或帮助。

传统知识

4

3 回答 3

0

你的 i 变量总是被评估为 3，这使得 q[i] 未定义。您必须找到一种方法，例如一个类，也许可以将关联的数字保留到回调中。

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

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

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

于 2010-06-17T05:17:48.223 回答
0

您必须在单独的闭包中捕获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 闭包的信息。

于 2010-06-17T05:58:55.523 回答
0

我会通过向链接添加一个类来解决这个问题，比如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);
            });
        });
    });
});

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

于 2010-06-17T06:17:13.773 回答