JQuery：點擊監聽器不會保留來自循環的實例化變量

Question

我正在提出一個觀點，並且點擊像網站一樣的冒險/約會模擬器。我目前正在製作對話選項。在會話中的某個點出現的選項，允許用戶選擇他們的響應，或選擇某種提示選項。

我的整個系統似乎工作正常，除了我將對話選項填充到提示符的一個步驟。

//Run through up to 10 dialogue options and add to dialogue option window. 
    for(var i = 1; i<3; i++) 
    {   
     var Option = eval(O['o'+i]); 
     if(typeof(Option) !== 'undefined') 
     { 
      $("#CAM_OptionsFrame").append("<p id='DialogueO"+i+"' class='clickable'>"+Option[0]+"</p>"); 

      var funcString = Option[1]; 
      var func = window[funcString]; 
      $('#DialogueO'+i).on("click",function() { 
       $(this).off("click"); 
       endDialogueOption(time, O.noHide, function(){func();}); 
      }); 
     } 
    } 

我從參數中加載任意數量的對話選項及其合作伙伴函數。然後循環遍歷它們，列出提示HTML中的名稱並給它們一個唯一的ID。

然後我通過唯一ID選擇元素，並給它一個onclick監聽器，它指向由特定選項傳入的函數。

但是，單擊它們時，所有元素將運行最後一個選項功能。我懷疑聽者指向「func」變量，並且每次我在循環中更改它時都會更新它。

如何讓偵聽器引用變量的實例，以便每個新偵聽器都引用它自己的「func」變量？

Answer 1

這是一個典型的關閉問題。你有2個選項，一次是用循環的當前索引調用每個函數。

for (var i = 1; i < 3; i++) { 
    (function(index) { 
    var Option = eval(O['o' + index]); 
    if (typeof(Option) !== 'undefined') { 
     $("#CAM_OptionsFrame").append("<p id='DialogueO" + index + "' class='clickable'>" + Option[0] + "</p>"); 

     var funcString = Option[1]; 
     var func = window[funcString]; 
     $('#DialogueO' + index).on("click", function() { 
     $(this).off("click"); 
     endDialogueOption(time, O.noHide, function() { 
      func(); 
     }); 
     }); 
    } 
    })(i) 
} 

如果你在代碼庫支持ES6，那麼你唯一需要改變的，如果var到let for循環。

for (let i = 1; i < 3; i++) { 
.. everything else remains the same.