javascript - 为什么我不能在 FancyBox 中使用 javascript 变量？

Question

// Post Div
<div id="post-1"><img src="art/image01.jpg" /></div>
<div id="post-2"><img src="art/image02.jpg" /></div>
<div id="post-3"><img src="art/image03.jpg" /></div>

// MYSQL Json Encode Generated Information
var allPosts = [{"type":"tumblr", "link":"www.blah.com"},
    {"type":"instagram", "link":"blah.com"},
    {"type":"tumblr", "link":"www.blah.com"}]

var postTotals = 3;

// Generates FancyBox Links for Clickable Post Div
function generateFancyBox(){
    for(i=1;i<=postTotals;i++){
        $("#post-"+i).click(function(){
            alert(allPosts[i].link); // This alerts "www.blah.com" just fine.
            $.fancybox({
            "type" : "iframe",
            "href" : allPosts[i].link // This Variable is always "Undefined".
            });
        });
    }
}

我不明白为什么 href :allPosts[i].link - 总是变成未定义。

此代码是我正在处理的一个较大项目的简写版本。我有 html DIV，需要 FancyBox 来创建可点击的链接。

我似乎无法获取 allPosts[i].link 来打印 URL。然而，在它的正上方，当我 alert(allPosts[i].link); 时，它会很好地打印 URL。

我做错了什么？

Answer 1

将 $.fancybox 调用替换为立即执行的函数，这会创建一个额外的闭包。

(function () {
        alert(i);
        $.fancybox({
            "type": "iframe",
            "href": allPosts[i].link // This Variable is always "Undefined".
        });
    })();