为什么可以'；我不能在FancyBox中使用javascript变量吗？ //Post Div //MYSQL Json编码生成的信息 var allPosts=[{“type”：“tumblr”，“link”：“www.blah.com”}， {“type”：“instagram”，“link”：“blah.com”}， {“type”：“tumblr”，“link”：“www.blah.com”}] var postTotals=3； //为可点击的Post Div生成FancyBox链接 函数generateFancyBox（）{ 对于（i=1；i

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

// 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".
            });
        });
    }
}

2个问题：

1） 在click事件处理程序中，将click处理程序赋值包装在立即调用的函数表达式（IIFE）中

函数generateFancyBox（）{
对于（i=1；i而言，真正的问题是在
循环中创建闭包。有关更多信息，请参见

您需要做的是在
循环
的外部创建闭包，并将其作为
单击
事件的处理程序（或回调）调用，将
i
作为参数传递，因此

关闭：

function generateFancyBox(){
    for(i=1;i<=postTotals;i++){
        (function (ii) {
            $("#post-"+ii).click(function(){
                console.log(allPosts[ii-1].link);                
                //$.fancybox({ "type" : "iframe", "href" : allPosts[ii-1].link });
            });
        }(i))
    }
}

然后将
单击
事件绑定到
generateFancyBox（）
函数中的每个
div
，如下所示：

函数generateFancyBox（）{
对于（var i=0；i

注释：


我们需要初始化
i
并用
var
声明它（在
strict
模式下，如果您不这样做，它将返回
未声明的变量
错误）
请注意，
i
应始终以
0
开头，否则您将永远无法访问
allPosts
数组的第一个元素。不过，您需要使用
（i+1）
来引用每个div的ID
实际上，您不需要
var postTotals=3；
，因为您可以始终参考
allPosts
数组的
长度


请参见
如何处理代码？将fancyBox包装在iLife中。感谢您的建议，我尝试使用iLife，但开始遇到更多错误。因此，为了避免所有问题，我现在使用PHP生成fancyBox，而不是Javascript。这要简单得多，我仍然不明白为什么它不能与Java一起工作我想我的代码中可能有太多其他的东西在运行——也许它只是与fancybox冲突。我仔细查看并设置了JSFIDLE。这似乎与我更新的答案中提到的修复程序一起工作。
function generateFancyBox(){
    for(i=1;i<=postTotals;i++){
        (function (ii) {
            $("#post-"+ii).click(function(){
                console.log(allPosts[ii-1].link);                
                //$.fancybox({ "type" : "iframe", "href" : allPosts[ii-1].link });
            });
        }(i))
    }
}

function launchFancybox(i) {
    return function () {
        $.fancybox({
            type: "iframe",
            href: allPosts[i].link
        });
    }
}

function generateFancyBox() {
    for (var i = 0; i < allPosts.length; i++) {        
        $("#post-"+(i+1)).click( launchFancybox(i) );
    }
}