javascript onclick, función anónima

StackOverflow https://stackoverflow.com/questions/1061622

Pregunta

Soy un programador principiante de JavaScript.Estoy intentando crear algo similar a Lightbox 2, pero mucho más sencillo.La única razón por la que quiero hacerlo desde cero por mi cuenta es para poder aprender.Sin embargo, me he quedado atascado en la última parte crítica donde se muestra la imagen.Creo que el problema radica en que intento utilizar onclick con la asignación a una función anónima:elem[i].onclick = función (){liteBoxFocus(imgSource,imgTitle);falso retorno;};.Si ejecuta mi código e intenta hacer clic en el logotipo de Google, aparecerá el logotipo y el título de Google en lugar del logotipo y el título de Google.Sin embargo, cuando haces clic en el logotipo de Google, funciona bien, por lo que parece que la función anónima solo se mantiene durante el último ciclo.¡¡¡Gracias de antemano!!!

He colocado todo el CSS/JS/XHTML en una página para su comodidad.

<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>
¿Fue útil?

Solución

Sus controladores de eventos forman un cierre que recuerda un puntero "activo" a las variables en el ámbito adjunto.Entonces, cuando realmente se ejecutan, tienen el último valor. imgSource y imgTitle tenía.

En su lugar, puede utilizar este patrón para localizar los valores de las variables.Esto creará copias de la fuente y el título dentro de getClickHandler cada vez que se llame.Por lo tanto, la función devuelta recuerda los valores en esa iteración del bucle.

//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";
    }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top