Question

如何在my循环中保持对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＆＃39;中的google for＆＃39;范围），因此将i作为一个不同的变量处理并提供正确的权限值事件监听器回调函数。

但是您实际上不需要使用jQuery找到您的元素，因为您已经为其分配了一个事件监听器，并且在您的函数内部您使用引用了您的元素this

随着您无论如何使用jQuery，然后很容易找到i statesPolyObjects的正确索引（statesPolyStrings）$.inArray()传递id你的元素和$("#"+statesPolyStrings[i])数组（假设你正在处理唯一的ID。如果没有，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

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

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

google.maps.event.addDomListener

并打开浏览器的控制台，查看哪些活动正在传递......

请注意，虽然document.body.addEventListener传递了与{{1}}不同的内容，但浏览器之间也存在差异。例如，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)
}

for循环中的Javascript变量范围

3 个答案: