jquery - jQuery 添加的 div 上的 Google map addDomListener 只能看到循环的最后一次迭代

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。然后将 Google map DOM 监听器添加到每个附加的 div 中。这一切都工作正常，但 DOM 监听器似乎只知道数组的最后一个元素，即，它总是返回“柠檬”作为水果，无论您将鼠标悬停在哪个附加 div 上。

要明白我的意思，请访问 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.

你要做的很简单，你需要创建一个委托(delegate)。你可以这样做:

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();
    });
}