我有以下简单的脚本:
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 地图 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);
}
}
});
}
提前致谢...