Fatal编程技术网

javascript onclick，匿名函数

javascript function

javascript onclick，匿名函数,javascript,function,onclick,anonymous,Javascript,Function,Onclick,Anonymous,我是一名初级javascript程序员。我正在尝试创建类似于Lightbox 2的东西，但要简单得多。我想自己从头做起的唯一原因是为了学习。然而，我一直停留在最后一个关键部分，它显示图像。我认为问题在于我试图使用onclick并将其赋值给匿名函数：elem[I].onclick=function（）{liteBoxFocus（imgSource，imgTitle）；return false；}； 。如果你运行我的代码，并尝试点击谷歌标志，它会显示雅虎标志和标题，而不是谷歌的标志和标题。然而，当你

我是一名初级javascript程序员。我正在尝试创建类似于Lightbox 2的东西，但要简单得多。我想自己从头做起的唯一原因是为了学习。然而，我一直停留在最后一个关键部分，它显示图像。我认为问题在于我试图使用onclick并将其赋值给匿名函数：elem[I].onclick=function（）{liteBoxFocus（imgSource，imgTitle）；return false；}； 。如果你运行我的代码，并尝试点击谷歌标志，它会显示雅虎标志和标题，而不是谷歌的标志和标题。然而，当你点击雅虎标志时，它工作正常，所以匿名函数似乎只在最后一个循环中有效。提前感谢

为了方便起见，我将整个CSS/JS/XHTML放在一个页面中

<html> <head> <title>Erik's Script</title> <style type="text/css"> #liteBoxBg, #liteBox { display: none; } #liteBoxBg { background-color: #000000; height: 100%; width:100%; margin:0px; position: fixed; left:0px; top: 0px; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; z-index: 40; } #liteBox { background-color:#fff; padding: 10px; position:absolute; top:10%; border: 1px solid #ccc; width:auto; text-align:center; z-index: 50; } </style> <script type="text/javascript"> window.onload = start; function start(){ var imgTitle = "No title"; var imgSource; var elem = document.getElementsByTagName("a"); var i; //Dynamically insert the DIV's to produce effect var newDiv = document.createElement('div'); newDiv.setAttribute("id", "liteBox"); document.getElementsByTagName("body")[0].appendChild(newDiv); newDiv = document.createElement('div'); newDiv.setAttribute("id", "liteBoxBg"); document.getElementsByTagName("body")[0].appendChild(newDiv); //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 = function (){liteBoxFocus(imgSource,imgTitle); return false;}; } } //When foreground is clicked, close lite box document.getElementById("liteBoxBg").onclick = liteBoxClose; } //Brings up the image with focus function liteBoxFocus(source,title){ 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"; } //closes lite box function liteBoxClose(){ document.getElementById("liteBox").style.display = "none"; document.getElementById("liteBoxBg").style.display = "none"; return false; } </script> </head> <body> <a href="http://www.google.com/intl/en_ALL/images/logo.gif" rel="litebox" title="Google Logo"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></a> <a href=" http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" rel="litebox" title="Yahooo Logo"><img src=" http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /></a> </body> </html> 埃里克的剧本 #liteBoxBg，#liteBox{ 显示：无； } #liteBoxBg{ 背景色：#000000； 身高：100%； 宽度：100%； 边际：0px； 位置：固定； 左：0px； 顶部：0px； 过滤器：α（不透明度=80）； -moz不透明度：0.8； -khtml不透明度：0.8； 不透明度：0.8； z指数：40； } #liteBox{ 背景色：#fff； 填充：10px； 位置：绝对位置； 排名前10%； 边框：1px实心#ccc； 宽度：自动； 文本对齐：居中； z指数：50； } window.onload=开始； 函数start（）{ var imgTitle=“无标题”； var-imgSource； var elem=document.getElementsByTagName（“a”）； var i； //动态插入DIV以产生效果 var newDiv=document.createElement（'div'）； setAttribute（“id”、“liteBox”）； document.getElementsByTagName（“body”）[0].appendChild（newDiv）； newDiv=document.createElement（'div'）； setAttribute（“id”、“liteBoxBg”）； document.getElementsByTagName（“body”）[0].appendChild（newDiv）； //用rel=litebox检查这些锚点 对于（i=0；i”+ ""; document.getElementById（“liteBoxBg”）.style.display=“block”； } //关闭lite盒 函数liteBoxClose（）{ document.getElementById（“liteBox”）.style.display=“无”； document.getElementById（“liteBoxBg”）.style.display=“无”； 返回false； }
事件处理程序形成一个闭包，用于记住指向封闭范围内变量的“活动”指针。因此，当它们实际执行时，它们具有最后一个值
imgSource
和
imgTitle
had

相反，您可以使用此模式来本地化变量值。这将在每次调用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";
    }
}

//使用rel=litebox检查这些锚定
对于（i=0；i”+
"";
document.getElementById（“liteBoxBg”）.style.display=“block”；
}
}