Javascript 从匿名函数访问外部变量

我早些时候问过这个问题，联系到了一个对我没什么帮助的问题

我有一个类的实例列表，这些类存储对DOM元素、方法和INT的引用

我需要遍历这些类实例，并将该方法分配给元素的click事件

for(var i = 0, l=children.length; i<l; i++) {
      var child = children[i];
      if(child.nodeType === 1 && child.tagName === "LI") {
        listItems[x] = new subMenu(child);
        child.addEventListener('click', function(x) {
          listItems[x].toggle(); <!------- x is always 7, it should be 0-6
        }, false);
        x++;
      }
    }

以下是列表项的图像：

编辑： 如果我从链接帖子中做出我认为正确的更改，我会得到以下结果：

var menuParent = document.getElementById('megamenu');
    var children = menuParent.childNodes;
    var x = 0;
    for(var i = 0, l=children.length; i<l; i++) {
      var child = children[i];
      if(child.nodeType === 1 && child.tagName === "LI") {
        listItems[x] = new subMenu(child);
        child.addEventListener('click', bindToggle(x), false);
        x++;
      }
    }
    function bindToggle(i) {
      return listItems[i].toggle();
    }
  }, false);

然而，console.log只是简单地输出

价值：2

---

如果我在EventHandler`上方的行中添加一个console.logx，那么它应该显示0-6，因此传递给函数的值不应该是问题所在

这是参考问题的公认答案中的代码：

它返回一个函数。返回值传递给addEventListener

这是您的等效代码：

它只是做一些事情，然后不返回任何未定义的内容

然后这个代码：

尝试将未定义的绑定为事件处理程序

---

你必须向addEventListener传递一个函数

链接到一个线程，这对我没有什么帮助。可能会提到哪一个，以及为什么它没有帮助，这样就不会再发生。对不起，我链接到这个线程，但我无法将那里显示的代码与我的个人问题联系起来：底线是，您在循环中有一个函数，并且在循环修改的函数中使用一个变量。链接的问题清楚地说明了问题以及如何处理它-后退一步，重新审视它。我遇到的问题是，如果我创建一个完整的函数只是为了将toggle方法分配给click事件，那么函数将在分配时执行，然后在我点击元素时执行，就像它应该做的那样-这没有多大意义。尝试创建一个演示您所遇到的问题并实施所给出的解决方案，而不是忽略这些解决方案，而只是重复原始问题。重复的问题有14个答案，得分为10分或以上。只是耸耸肩，说你不理解他们中的任何一个，如果他们想帮助你理解的话，这不会给任何人带来太多的帮助。

var menuParent = document.getElementById('megamenu');
    var children = menuParent.childNodes;
    var x = 0;
    for(var i = 0, l=children.length; i<l; i++) {
      var child = children[i];
      if(child.nodeType === 1 && child.tagName === "LI") {
        listItems[x] = new subMenu(child);
        child.addEventListener('click', bindToggle(x), false);
        x++;
      }
    }
    function bindToggle(i) {
      return listItems[i].toggle();
    }
  }, false);

var menuParent = document.getElementById('megamenu');
    var children = menuParent.childNodes;
    var x = 0;
    for(var i = 0, l=children.length; i<l; i++) {
      var child = children[i];
      if(child.nodeType === 1 && child.tagName === "LI") {
        listItems[x] = new subMenu(child);
        child.addEventListener('click', bindToggle(x), false);
        x++;
      }
    }
    function bindToggle(x) {
      return function() { console.log("Value: " + x); }; // listItems[x].toggle();
    }

function createfunc(i) {
    return function() { console.log("My value: " + i); };
}

function bindToggle(i) {
  return listItems[i].toggle();
}

child.addEventListener('click', bindToggle(x), false);