在JavaScript中，循环功能无法访问环路范围变量

Question

它是基于jQuery UI方便

假设这里是HTML代码

<div id="menu" class="easyui-menu" style="width:120px;"> 
    <div>New</div> 
    <div> 
     <span>Open</span> 
     <div style="width:150px;"> 
      <div><b>Word</b></div> 
      <div>Excel</div> 
      <div>PowerPoint</div> 
     </div> 
    </div> 
    <div data-options="iconCls:'icon-save'">Save</div> 
    <div class="menu-sep"></div> 
    <div>Exit</div> 
</div> 

问题是，如果你设置菜单在循环中，功能总是被最后一条语句触发，即i总是等于4在console.log(itemLabel + i + "is selected.");

$(function(){ 
    var jqMenu = $("#menu"); 
    for (var i = 0; i < 5; i++) { 
    var itemLabel = "item " + i; 
    // correct 
    var onclickFunction = function(){ 
     console.log(itemLabel + i + "is selected."); 
    } 

    jqMenu.menu("appendItem",{ 
     "text":itemLabel, 
     "onclick": function(){ 
     console.log(itemLabel + " is selected."); 
     } 
    }); 
    } 
}) 
$(document).bind('contextmenu',function(e){ 
       e.preventDefault(); 
    $("#menu").menu('show', { 
     left: 200, 
     top: 100 
    }); 
}); 

Answer 1

你正面临AB问题ove可以使用闭包来解决。我曾经遇到过这个挑战，并使用闭包解决它。

更改您的代码以符合此条件。尝试在你的代码中使用这种格式。

for (var i = 0; i < 5; i++) { 
    (function(x){ 
     console.log(x); 
    })(i); 
} 

Answer 2

呀，用一个函数来创建一个封闭会有所帮助，还检查了这样的回答：https://stackoverflow.com/a/3572616/883571

个人而言，我会建议使用forEach绕开的问题：

[1,2,3,4,5].forEach(function(i) { 
    console.log(i) 
});