Google地图addDomListener对由jQuery添加的div只能看到循环的最后一次迭代 [英] Google Maps addDomListener on div added by jQuery only sees last iteration of loop

问题描述

我有以下简单的脚本：

  var fruits = new Array（apple，orange， 柠檬）; 
 
 $（＃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 +'> +水果+< / div>; 
 var fruitdiv = $（html）; 
 $（＃fruit_canvas）。append（fruitdiv）; 
 
 google.maps.event.addDomListener（$（fruitdiv）[0]，'mouseover'，function（）{
 $（＃result_canvas）。append（Mouse over +水果）; 
}）; 
 
 google.maps.event.addDomListener（$（fruitdiv）[0]，'mouseout'，function（）{
 $（＃result_canvas）。empty（）; 
}）; 
} 
  

它通过一个简单的数组循环，使用jQuery来创建一个div元素，并将其附加到另一个div。然后将Google Maps DOM侦听器添加到每个附加的div。这一切都很好，但DOM监听器似乎只知道数组的最后一个元素，即它总是返回柠檬作为水果，无论哪个附加div你鼠标悬停。

要了解我的意思，请转至 http：//www.pinksy .co.uk / maptest.html 并将鼠标悬停在每个div上。

我确定这是显而易见的， DOM元素的DOM监听器，但我不知道如何！

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

pre $ document.getElementById（'fruit_canvas2'）。appendChild（document.createTextNode（Mouse over these：））;

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（）{$ b $ document.getElementById（'result_canvas2'）。appendChild（document.createTextNode（Mouse over+水果））;
}）;

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）;
}
}
}）;

$ / code>

预先致谢...

解决方案

你遇到的问题是范围之一。当您创建侦听器时， fruit 确实具有正确的值，但是当它执行时，它会将 fruit 的最后一个状态c>在你的情况下，柠檬。

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

  var someFunction =（function（vars）{
 return function（）{
 //用vars做某事... 
}; 
}）（vars）; 
  

您存储在 someFunction 中的内容将保留声明时的变量值。
您的代码如下所示：

  var fruits = new Array（apple，orange ，柠檬）; 
 
 $（＃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 +'> +水果+< / div>; 
 var fruitdiv = $（html）; 
 $（＃fruit_canvas）。append（fruitdiv）; 
 $ b $ 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（）; 
}）; 
} 
  

I've got the following simple script:

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

It loops through a simple array, uses jQuery to make a div out of each element, and appends it to another div. A Google Maps DOM listener is then added to each appended div. That all works fine, but the DOM listener only seems to be aware of the last element of the array, i.e., it always returns "lemon" as the fruit, no matter which appended div you mouseover.

To see what I mean, go to http://www.pinksy.co.uk/maptest.html and hover over each of the divs.

I'm sure it's something obvious to do with how I'm passing the DOM element to the DOM listener, but I'm not sure how!

I've also tried it without jQuery, but get the same results:

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

Thanks in advance...

解决方案

The problem you're having is one of scope. When you create the listener, the fruit does have the correct value, but when its executed, it takes the last state of fruit in your case, lemon.

What you have to do is simple, you need to create a delegate. You can do that like this:

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

And what you store in someFunction will keep the value of vars at the time of declaration. Your code using that would look like this:

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

这篇关于Google地图addDomListener对由jQuery添加的div只能看到循环的最后一次迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！