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 - 总是变成undefined。

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

我似乎无法让allPosts[i].link打印URL。但是，就在它上方，当我alert(allPosts[i].link);时，它打印网址就好了。

我做错了什么？

Answer 1

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

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

Answer 2

2个问题：

1）在click事件处理程序中，将Click处理程序赋值包装在Immediately Invoked Function Expression（IIFE）中。

JSFiddle it.

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

当点击处理程序（和fancybox）完成它的工作时，i不是它作为参考传递给fancybox时的情况。将i作为参数传递给IIFE，您需要创建一个新的范围，其中包含一个新变量ii，该变量将被锁定到for循环的当前值{{1当它被传递给点击处理程序时。

2）循环和DIV索引也存在问题，不能与图像/链接阵列同步。所以我改变了：

i至allPosts[ii]

您的循环和图片DIV以＆＃34; 1＆＃34; 开头，如allPosts[ii-1]和for(i=1;，但您的图片/链接数组是从零开始的，表示它以{em>＆＃34; 0＆＃34; 开头，如post-1所示。因此，当抓取图像/链接元素时，将计数器减1。

Answer 3

真正的问题是您正在loop内创建闭包。有关详细信息，请参阅 this 。

您需要做的是在loop之外创建闭包，并将其称为处理程序（或您的click 事件的回调），将i作为参数传递，所以

关闭：

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

然后将<{1}}事件绑定到click 函数中的每个div，如：

generateFancyBox()

注意：

我们需要初始化function generateFancyBox() { for (var i = 0; i < allPosts.length; i++) { $("#post-"+(i+1)).click( launchFancybox(i) ); } }使用i声明它（在var模式下，如果不这样做，它将返回strict错误）

请注意，undeclared variable应始终以i开头，否则您永远无法访问0 数组的第一个元素。您需要使用allPosts来引用每个div的ID。

您实际上并不需要(i+1)，因为您始终可以参考var postTotals = 3;数组的length

参见 JSFIDDLE

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

3 个答案: