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选择元素，并给它一个单击侦听器，该侦听器指的是特定选项传递的函数。

但是，当您单击它们时，所有元素都会运行最后一个选项功能。我怀疑听众指向" 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 loop中，则需要更改。

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