Question

它基于jQuery Easy 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

您可以使用闭包解决上面遇到的问题。我曾经遇到过这个挑战并使用闭包来解决它。

更改您的代码以匹配此内容。尝试在代码中使用此格式。

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

在javascript中，函数in循环不能访问循环范围变量

2 个答案: