javascript onclick，匿名函数

我是一个开始的javascript程序员。我正在尝试创建类似于Lightbox 2的内容，但要简单得多。为什么我想从头开始做我自己的唯一原因是我可以学习。不过，我一直被困在显示图像的最后关键部分。我相信问题在于我尝试使用onclick将其赋值给匿名函数：elem [i] .onclick = function（）{liteBoxFocus（imgSource，imgTitle）;返回false;}; 。如果您运行我的代码并尝试点击Google徽标，它会显示yahoo徽标和标题，而不是谷歌的徽标和标题。但是，当你点击雅虎标志时，它可以正常工作，所以似乎匿名函数只适用于最后一个循环。提前致谢！！！javascript onclick，匿名函数

为了您的方便，我已将整个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>

来源

2009-06-30 Erik

你的事件处理程序形成封盖，能记住在封闭范围“活”指针变量。所以当它们实际执行时，它们的最后一个值为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"; 
    } 
}

来源

2009-06-30 04:07:34

+1打我吧 – 2009-06-30 04:12:48

javascript onclick，匿名函数

回答

相关问题