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