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

我有以下简单的脚本：

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 = "
" + fruit + "
"; 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 Maps DOM侦听器添加到每个附加的div中。 这一切都很好，但是DOM监听器似乎只知道数组的最后一个元素，即它总是返回“lemon”作为水果，无论你将鼠标hover在哪个div上。

要查看我的意思，请访问http://www.pinksy.co.uk/maptest.html并将鼠标hover在每个div上。

我确信这与我如何将DOM元素传递给DOM侦听器有明显的关系，但我不确定如何！

我也尝试过没有jQuery，但得到相同的结果：

 document.getElementById('fruit_canvas2').appendChild(document.createTextNode("Mouse over these fruits:")); for(var i = 0; i = 1) { cell.removeChild(cell.firstChild); } } }); } 

提前致谢…

Answer 1

你遇到的问题是范围问题。 当你创建监听器时， fruit确实具有正确的值，但是当它被执行时，它会在你的情况下采用最后的fruit状态lemon 。

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

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

而你在someFunction存储的someFunction将在someFunction时保留变量的值。 使用它的代码如下所示：

 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 = "
" + fruit + "
"; 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(); }); }