Javascript Onclick, anonyme Funktion

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

Frage

Ich bin ein Anfang JavaScript-Programmierer. Ich versuche, etwas ähnliches zu Lightbox 2, aber viel einfacher zu erstellen. Der einzige Grund, warum ich es von Grund auf selbst tun möchte, ist so, dass ich lernen kann. Allerdings habe ich am letzten kritischen Teil stecken, wo sie das Bild anzeigt. Ich glaube, das Problem liegt, wo ich versuche Onclick auf eine anonyme Funktion mit Zuordnung zu verwenden: Elem [i] .onclick = function () {liteBoxFocus (ImgSource, imgTitle); falsch zurückgeben;}; . Wenn Sie meinen Code ausführen und versuchen, auf dem Google-Logo klicken, es wird den Yahoo-Logo und Titel statt Google-Logo und Titel holen. Allerdings, wenn Sie auf dem Yahoo-Logo klicken, es funktioniert so scheint es, dass die anonyme Funktion nur für die letzte Schleife hält. Vielen Dank im Voraus !!!

Ich habe die gesamte CSS / JS / XHTML in einer Seite für Ihre Bequemlichkeit gelegt. 

<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>
War es hilfreich?

Lösung

Ihre Event-Handler bilden einen Verschluss, der einen „Live“ Zeiger auf die Variablen in dem umschließenden Umfang erinnern. Also, wenn sie tatsächlich ausgeführt werden, haben sie die letzten Wert imgSource und imgTitle hatten.

Sie können stattdessen dieses Muster verwenden, um die Variablenwerte zu lokalisieren. Dies erzeugt Kopien von Quelle und Titel innerhalb getClickHandler jedes Mal aufgerufen wird. Die zurückgegebene Funktion merkt sich daher die Werte in dieser Iteration der Schleife. 

//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";
    }
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top