javascript onclick, fonction anonyme

Je suis débutant en javascript programmeur. Je suis en train de créer quelque chose de similaire à Lightbox 2, mais beaucoup plus simple. La seule raison pourquoi je veux le faire à partir de zéro sur mon propre pour que je puisse apprendre. Cependant, j'ai été coincé sur la dernière partie critique où il affiche l'image. Je crois que le problème est là où j'essaie d'utiliser onclick avec l'affectation à une fonction anonyme:elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle); return false;};
. Si vous exécuter mon code et essayez de cliquer sur le logo google, il va afficher le logo de yahoo et titre au lieu de google, le logo et le titre. Toutefois, lorsque vous cliquez sur le logo de yahoo, il fonctionne très bien il semble donc que la fonction anonyme ne tient que pour la dernière boucle. Merci à l'avance!!!!!

J'ai placé la totalité des CSS/JS/XHTML en une page pour votre commodité.

<html> 
<head> 
<title>Erik Script</title> 

<style type="text/css"> 
#liteBoxBg, #liteBox { 
display: none; 
} 

#liteBoxBg { 
background-color: #000000; 
hauteur: 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"> 

de la fenêtre.onload = start; 

la fonction start(){ 

var imgTitle = "Pas de titre"; 
var imgSource; 
var elem = document.getElementsByTagName("a"); 
var i; 

//Insérer dynamiquement la DIV pour produire d'effet 
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); 

//Vérification de ces ancrages avec rel=litebox 
for(i = 0;i < elem.longueur;i++){ 
if(elem[i].rel == "litebox"){ 
imgSource = elem[i].href.toString(); 
imgTitle = elem[i].titre; 
elem[i].childNodes[0].style.border="0px solid #fff"; 
elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle); return false;}; 
} 
} 

//Lors de l'avant-plan est cliqué, à proximité lite boîte 
document.getElementById("liteBoxBg").onclick = liteBoxClose; 
} 

//Affiche l'image avec l'accent 
fonction liteBoxFocus(source,titre){ 
document.getElementById("liteBox").style.display = "block"; 
document.getElementById("liteBox").innerHTML = "<h1>" + titre + "</h1>" + 
"<img src='" + source + "'/><br />" + 
"<un href='#' onclick='liteBoxClose ();" ><img src='images/litebox_close.gif' border='0' alt= "fermer" /></a>"; 
document.getElementById("liteBoxBg").style.display = "block"; 
} 

//ferme lite boîte 
fonction 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"  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"  title="Yahooo Logo"><img src=" 
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /></a> 



</body> 
</html>

OriginalL'auteur Erik | 2009-06-30

  1. 10

    Vos gestionnaires d'événements former une fermeture qui me souviens d'un "live" pointeur pour les variables dans le cadre englobant. De sorte que lorsqu'ils sont réellement exécutés, ils ont la dernière valeur imgSource et imgTitle avait.

    Au lieu de cela, vous pouvez utiliser ce modèle pour localiser les valeurs des variables. Cela permettra de créer des copies de source et de titre à l'intérieur getClickHandler chaque fois qu'elle est appelée. La fonction renvoyée par conséquent mémorise les valeurs dans cette itération de la boucle.

    //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";
    }
}
    +1 me battre pour elle

    OriginalL'auteur Chetan Sastry