javascript onclick, função anônima
-
21-08-2019 - |
Pergunta
Eu sou um programador javascript começando. Eu estou tentando criar algo semelhante a Lightbox 2, mas muito mais simples. A única razão pela qual eu quero fazê-lo a partir do zero no meu próprio país é para que eu possa aprender. No entanto, eu estive preso na última parte crítica onde se exibe a imagem. Acredito que as mentiras de problema em que eu tento usar onclick com atribuição de uma função anônima: elem [i] .onclick = function () {liteBoxFocus (imgSource, imgTitle); retorna falso;}; . Se você executar o meu código e tente clicar no logotipo do Google que vai trazer o logotipo yahoo e título em vez do logotipo e título do google. No entanto, quando você clicar no logotipo yahoo ele funciona bem assim, parece que a função anônima detém apenas para o último loop. Agradecemos antecipadamente !!!
Eu coloquei todo o CSS / JS / XHTML em uma página para sua conveniência.
<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>
Solução
Seus manipuladores de eventos formar um fecho que se lembrar de um ponteiro de "ao vivo" para as variáveis ??no escopo delimitador. Então, quando eles são realmente executados, eles têm o último valor imgSource
e imgTitle
tinha.
Em vez disso, você pode usar este padrão para localizar os valores das variáveis. Isto irá criar cópias de fonte e título dentro getClickHandler cada vez que ele é chamado. A função devolvido, portanto, memoriza os valores, em que iteração do ciclo.
//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";
}
}