javascript onclick、匿名関数

私は初心者のプログラマーです。 Lightbox 2と似たようなものを作成しようとしていますが、はるかに簡単です。私が自分で一からそれをやりたいのは、私が学ぶことができる理由だけです。しかし、私はそれが画像を表示する最後の重要な部分に立ち往生してきました。私は問題は、無名関数への代入でonclickを使用しようとするところにあると信じています。elem [i] .onclick = function（）{liteBoxFocus（imgSource、imgTitle）; return false;}; 。コードを実行してGoogleロゴをクリックしようとすると、Googleのロゴとタイトルの代わりにyahooのロゴとタイトルが表示されます。しかし、ヤフーのロゴをクリックすると正常に動作するので、無名関数は最後のループだけを保持しているようです。前もって感謝します！！！javascript onclick、匿名関数

あなたの便宜のために、CSS/JS/XHTML全体を1ページに配置しました。

 
<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私にそれを打つ –

javascript onclick、匿名関数

答えて

関連する問題