Google Maps addDomListener на div, добавленный jQuery, видит только последнюю итерацию цикла

Question

У меня есть следующий простой скрипт:

var fruits = new Array("apple","orange","lemon");

$("#fruit_canvas").append("Mouse over these fruits:");

for(var i = 0; i < fruits.length; i++)
{
    var fruit = fruits[i];
    var html = "<div id='fruit" + i + "'>" + fruit + "</div>";
    var fruitdiv = $(html);
    $("#fruit_canvas").append(fruitdiv);

    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseover', function() {
        $("#result_canvas").append("Mouse over " + fruit);
    });

    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseout', function() {
        $("#result_canvas").empty();
    });
}

Он проходит по простому массиву, использует jQuery для создания элемента div из каждого элемента и добавляет его к другому элементу div.Затем к каждому добавленному элементу div добавляется прослушиватель DOM Google Maps.Это все работает нормально, но слушатель DOM, похоже, знает только о последнем элементе массива, то есть он всегда возвращает «лимон» в качестве плода, независимо от того, какой из них был добавлен при наведении мыши.

Чтобы увидетьчто я имею в виду, перейдите к http://www.pinksy.co.uk/maptest.html и наведите указатель мыши на каждый из элементов div.

Я уверен, что это связано с тем, как я передаю элемент DOM слушателю DOM, ноЯ не знаю как!

Я тоже пробовал без jQuery, но получаю те же результаты:

document.getElementById('fruit_canvas2').appendChild(document.createTextNode("Mouse over these fruits:"));

for(var i = 0; i < fruits.length; i++)
{
    var fruit = fruits[i];
    var div = document.createElement('div');
    div.innerHTML = fruit;
    document.getElementById('fruit_canvas2').appendChild(div);

    google.maps.event.addDomListener(div, 'mouseover', function() {
        document.getElementById('result_canvas2').appendChild(document.createTextNode("Mouse over " + fruit));
    });

    google.maps.event.addDomListener(div, 'mouseout', function() {
        var cell = document.getElementById('result_canvas2');

        if(cell.hasChildNodes())
        {
            while(cell.childNodes.length >= 1)
            {
                cell.removeChild(cell.firstChild);       
            } 
        }
    });
}

Заранее спасибо ...

Answer 1

Проблема, с которой вы столкнулись, - это проблема. Когда вы создаете прослушиватель, fruit имеет правильное значение, но при его выполнении оно принимает последнее состояние fruit в вашем случае, lemon.

То, что вам нужно сделать, просто, вам нужно создать делегата. Вы можете сделать это так:

var someFunction = (function(vars) {
    return function() {
        //Do something with vars...
    };
})(vars);

И то, что вы храните в someFunction, сохранит значение vars на момент объявления. Ваш код, использующий это, будет выглядеть так:

var fruits = new Array("apple","orange","lemon");

$("#fruit_canvas").append("Mouse over these fruits:");

for(var i = 0; i < fruits.length; i++)
{
    var fruit = fruits[i];
    var html = "<div id='fruit" + i + "'>" + fruit + "</div>";
    var fruitdiv = $(html);
    $("#fruit_canvas").append(fruitdiv);

    var mouseoverListener = (function(fruit) {
        return function() {
            $("#result_canvas").append("Mouse over " + fruit);
        };
    })(fruit);
    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseover', mouseoverListener);

    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseout', function() {
        $("#result_canvas").empty();
    });
}