JQuery淡入淡出循环问题

Question

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

$(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或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 2

您的变量i是在3总是评价，这使得Q [I]未定义。你必须找到一种方式，就像一个类可能会保持与回调相关的数字一样。

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

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

，如果你担心重复代码只写一个接受什么网页加载并调用它在每个。点击（）

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); 
      }); 
     }); 
    }); 
}); 

这侧步循环，在未来你只需要添加或编辑链接改变链接上的数据。