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，匿名函數

回答

相關問題