javascript onclick，匿名函数答案

【问题标题】：javascript onclick, anonymous functionjavascript onclick，匿名函数
【发布时间】：2010-11-06 21:24:40
【问题描述】：

我是一名初级 javascript 程序员。我正在尝试创建类似于 Lightbox 2 的东西，但要简单得多。我想自己从头开始做这件事的唯一原因是我可以学习。但是，我一直停留在显示图像的最后一个关键部分。我相信问题在于我尝试使用 onclick 并分配给匿名函数：elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle);返回假;}; 。如果您运行我的代码并尝试单击 google 徽标，它将显示 yahoo 徽标和标题，而不是 google 的徽标和标题。但是，当您单击雅虎徽标时，它可以正常工作，因此匿名函数似乎仅适用于最后一个循环。提前谢谢！！！

为了您的方便，我已将整个 CSS/JS/XHTML 放在一个页面中。

埃里克的剧本

标签： javascript function onclick anonymous

【解决方案1】：

您的事件处理程序形成一个闭包，该闭包记住一个“活动”指针，该指针指向封闭范围内的变量。所以当它们实际执行时，它们具有最后一个值imgSource 和imgTitle。

相反，您可以使用此模式来本地化变量值。这将在每次调用 getClickHandler 时创建源和标题的副本。因此，返回的函数会记住循环迭代中的值。

//Check those anchors with rel=litebox
for(i = 0;i < elem.length;i++){
    if(elem[i].rel == "litebox"){
        imgSource = elem[i].href.toString();
        imgTitle = elem[i].title;
        elem[i].childNodes[0].style.border="0px solid #fff";
        elem[i].onclick = getClickHandler(imgSource, imgTitle);
    }
}


//Brings up the image with focus
function getClickHandler(source,title){
    return function() {
        document.getElementById("liteBox").style.display = "block";
        document.getElementById("liteBox").innerHTML = "<h1>" + title + "</h1>" +
                                               "<img src='" + source + "'/><br />" +
                                               "<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
        document.getElementById("liteBoxBg").style.display = "block";
    }
}

【讨论】：