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

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

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

<HTML>
<Голова>
<title> Сценарий Эрика </ title>

<style type = "text / css">
#liteBoxBg, #liteBox {
    дисплей: нет;
}

#liteBoxBg {
    цвет фона: # 000000;
    высота: 100%;
    ширина: 100%;
    Маржа: 0px;
    положение: фиксированное;
    Слева направо: 0px;
    верх: 0px;
    Фильтр: альфа (непрозрачность = 80);
    -moz-непрозрачность: 0,8;
    -хтмл-непрозрачность: 0,8;
    непрозрачность: 0,8;
    z-индекс: 40;
}

#liteBox {
    цвет фона: #fff;
    набивка: 10 пикселей;
    позиция: абсолютная;
    Топ 10%;
    граница: 1px solid #ccc;
    ширина: авто;
    выравнивания текста: центр;
    z-индекс: 50;
}
</ Стиль>

<script type = "text / javascript">

window.onload = start;

function start () {

    var imgTitle = "Без заголовка";
    var imgSource;
    var elem = document.getElementsByTagName ("a");
    вар я;

    // Динамически вставляем DIV для получения эффекта
    var newDiv = document.createElement ('div');
    newDiv.setAttribute ("id", "liteBox");
    document.getElementsByTagName ( "тело") [0] .appendChild (newDiv);

    newDiv = document.createElement ('div');
    newDiv.setAttribute ("id", "liteBoxBg");
    document.getElementsByTagName ( "тело") [0] .appendChild (newDiv);

    // Проверяем эти якоря с rel = litebox
    для (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); вернуть false;};
        }
    }

    // При нажатии на передний план закрываем облегченное поле
    document.getElementById ("liteBoxBg"). onclick = liteBoxClose;
}

// Поднимает изображение с фокусом
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";
}

// закрывает облегченное поле
function liteBoxClose () {
    document.getElementById ("liteBox"). style.display = "none";
    document.getElementById ("liteBoxBg"). style.display = "none";
    вернуть ложь;
}

</ Скрипт>



</ HEAD>

<Тело>

<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 "> <img src ="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg "alt =" "/> </a>



</ Body>
</ Html>
30.06.2009 03:47:22
1 ОТВЕТ
РЕШЕНИЕ

Ваши обработчики событий формируют замыкание, которое запоминает «живой» указатель на переменные во вложенной области видимости. Поэтому, когда они действительно выполняются, они имеют последнее значение 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";
    }
}
10
30.06.2009 04:07:34