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.