JavaScript onclick, анонимная функция

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

Вопрос

Я начинающий программист JavaScript.Я пытаюсь создать что-то похожее на Lightbox 2, но гораздо проще.Единственная причина, по которой я хочу сделать это с нуля самостоятельно, — это желание научиться.Однако я застрял на последней важной части, где отображается изображение.Я считаю, что проблема заключается в том, что я пытаюсь использовать onclick с присвоением анонимной функции:elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle);вернуть ложь;};.Если вы запустите мой код и попытаетесь нажать на логотип Google, вместо логотипа и названия Google отобразятся логотип и заголовок Yahoo.Однако когда вы нажимаете на логотип Yahoo, он работает нормально, поэтому кажется, что анонимная функция действует только для последнего цикла.Заранее спасибо!!!

Для вашего удобства я поместил весь CSS/JS/XHTML на одну страницу.

<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>
Это было полезно?

Решение

Ваши обработчики событий образуют замыкание, которое запоминает «живой» указатель на переменные в охватывающей области.Поэтому, когда они действительно выполняются, они имеют последнее значение. 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";
    }
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top