使用jQuery Conextmenu中的参数调用函数

Question

我正在从我的jquery-contextmenu sumbenu调用一个函数，根据单击的选项传递特定的参数。

我根据一个包含三个名称的js对象生成该子菜单。 当我单击其中之一时，它就被设置好了，我的函数以该名称作为参数被调用，然后被打印在控制台上。

但是它只使用最后一个元素来调用函数，我不知道为什么。 当我单击“ john”或“ Matt”时，它仅显示“您按下了Petter”。

就像这张图片：

即使我从未单击过“ Petter”，它也只显示“您按下了Petter”。

代码（我可以把小提琴放在这里，但是我没有找到jquery contextmenu链接，如果您将它共享给我，如果它存在的话，我会很高兴）：

var obj = {"1":"john","2":"Matt","3":"Petter"};

function myFun(name){
    console.log("you pressed "+name);
}

$(function() {
$.contextMenu({
  selector: '.context-menu-one',
  autoHide: true,
  build: function($trigger, e) {
    var options = {
      items: {}
    }

    options.items["users"] = {name: "users", icon: "fa-circle", items: {}}

    for(var i in obj){
      options.items["users"].items[obj[i]] = {name: obj[i], icon: "fa-user", callback: function(){
        myFun(obj[i]);
      }}
    }

    return options;
  }
});
});

对不起，我的英语不好，谢谢。

Answer 1

这是由于JavaScript语言关闭了。 回调中对变量i的引用将像以前一样在范围外进行存储和调用，但是，循环将遍历，全局范围内的i始终等于最后一个索引。 要解决此问题，请更改您的循环以使其工作

for(var i in obj){
  (function(j) {
    options.items["users"].items[obj[j]] = {name: obj[j], icon: "fa-user", callback: function(){
        myFun(obj[j]);
      }
    }
  })(i);
}

这将在函数中创建一个新的作用域，该作用域使循环保持闭合状态，并使i的值等于当前触发的索引，从而使菜单正常工作。

Answer 2

for(var i in obj){
  options.items["users"].items[obj[i]] = {
    name: obj[i], 
    icon: "fa-user", 
    callback: function(){
      myFun(obj[i]); // here is the problem
    }
  }
}

问题是由js关闭引起的， i变量在for循环的每个回调中均被捕获。 因此，当您单击菜单时执行回调时， 我将始终是相同的，因为它们是相同的变量。 i的值将是for循环完成时的值，在您的示例中为“ 3”。

这是通过使用IIFE（立即调用函数表达式）来避免此问题的方法

for (var i in obj) {
  (function (i) {
     // here goes the code in your for loop
  })(i);
}