Javascript可变范围内循环

如何保持对我的for循环中的i变量的访问？我试图学习，不只是得到答案，所以一些解释会非常有帮助。谢谢！Javascript可变范围内循环

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

来源

2012-06-08 chris_mac

你想在for循环之外访问'i'吗？您已经可以访问for循环中的'i'。 –

我想在for循环中的函数addDomListener中访问它。无论你在上面的代码中看到我，我都希望使用i，并在for循环中增加。 –

可能重复[Javascript闭合内部循环 - 简单实用的例子]（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） –

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

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

例如：

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

来源

2012-06-08 18:23:02 SLaks

你能提供一个例子，通过更正我的码？我不确定你是什么意思。 –

明白了，现在明白了。谢谢。 –

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

来源

2012-06-08 18:24:03 Sarfraz

与自我调用函数的诀窍正常工作：它创建了一个新的领域（也许谷歌的“范围，功能的JavaScript”），因此处理i的不同变量并将正确的值传递给您的事件侦听器回调函数。

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

正如你使用jQuery无论如何，它是那么容易找到正确的索引（您i）的statesPolyObjects有$.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，浏览器之间也有所不同。例如jQuery.on（）也在事件对象中提供了一些不同的东西，但在那里你至少可以指望所有浏览器中的相同数据。

来源

2013-09-08 11:19:02 jsmorph

Javascript可变范围内循环

回答

相关问题