for循环中的Javascript变量范围

Question

如何在我的for循环中保持对i变量的访问？ 我正在努力学习，而不仅仅是得到答案，所以一些解释会非常有帮助。 谢谢！

var el, 
    len = statesPolyStrings.length;

for (var i = 0; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
    });
}

Answer 1

所有回调都共享相同的i变量。
当事件处理程序实际运行时， i在数组结束之后。

您需要将循环体包装在一个自我调用函数中，该函数将i作为参数。
这样，每次迭代都会获得自己的，不变的i变量。

例如：

for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i) {
        ...
    })(i);
}

Answer 2

使用自调用函数的技巧可以正常工作：它创建了一个新的范围（可能谷歌为'函数javascript中的范围'），因此将i作为一个不同的变量处理，并为您的事件监听器回调函数提供正确的值。

但你其实并不需要使用jQuery 再次找到你的元素，你已经分配了一个事件侦听器，它和你的函数里面，你必须与你的元素的引用this 。

无论如何，当你正在使用jQuery时，很容易找到statesPolyObjects的正确索引（你的i ），其中$.inArray()传递你的元素的id和statesPolyStrings数组（假设你正在处理唯一的ID。如果不， $("#"+statesPolyStrings[i])也会失败，因为它会找到它找到的第一个）。

var el;

for (var i = 0, len = statesPolyStrings.length; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function(event) {
        $(this).addClass("highlight");
        statesPolyObjects[$.inArray(this.id, statesPolyStrings)].
            setOptions({ strokeWeight: '2' });
    });
}

如果你仍然想坚持使用自我调用功能，你应该改变以下行：

("#"+statesPolyStrings[i]).addClass("highlight");

至

$(this).addClass("highlight");

如果您对this和事件不太熟悉，可能需要阅读本文： http ： //www.sitepoint.com/javascript-this-event-handlers/

您可能已经注意到我还在匿名回调函数中编写了参数event 。 尝试使用任何事件监听器回调函数免费提供此事件的console.log并探索您可以访问的所有其他内容。 例如，您可以使用event.target找到您单击的实际元素（因为实际的鼠标悬停可能发生在元素的子节点上）。 所以：

google.maps.event.addDomListener(el, 'mouseover', function(event) {
    console.log(event);
    ...

并打开浏览器的控制台，查看哪些活动提供...

请注意， google.maps.event.addDomListener传递的document.body.addEventListener与document.body.addEventListener不同，浏览器之间也存在差异。 例如，jQuery.on（）在事件对象中也提供了一些不同的东西，但是你可以在所有浏览器中至少依赖相同的数据。

Answer 3

for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i){
        google.maps.event.addDomListener(document.getElementById(statesPolyStrings[i]), 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
        });
    })(i)
}