从匿名函数访问外部变量

-3

我之前问过这个问题，链接到This Thread，这对我来说并没有什么帮助。从匿名函数访问外部变量

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

我需要通过这些类实例中的每一个，并将方法分配给元素的单击事件。

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++; 
     } 
    }

下面是类：

class subMenu { 
     constructor(obj) { 
     this.elm = obj; 
     this.state = 0; 
     } 

     toggle() { 
     if (this.state === 0) { 
      addClass(this.elm, 'toggled'); 
      this.state = 1; 
     } else { 
      removeClass(this.elm, 'toggled'); 
      this.state = 0; 
     } 
     } 
    }

这里是listItems的图像：

编辑： 如果我做出改变我认为是从正确我得到这个：

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);

但是，toggle()方法只是在赋值时运行一次，然后在单击元素时不再运行。

编辑2 对不起，我确实做到了第一次正确，只是得到了错误的代码上面。所以我修改了我的代码以返回一个函数给EventHandler。

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(); 
    }

然而console.log被简单地输出

值：2

如果我添加一个console.log(x)的EventHandler`上面的行然后显示0-6喜欢它应该，所以传递给函数的值不应该成为问题。

来源

2017-04-04 Martyn Ball

_“得到了连接到一个线程，其并没有真正帮助我都没有。” _也许提到哪一个，为什么它没有帮助，所以它不会再发生。 –

对不起，我被链接到这个线程，但我不能将那里显示的代码与我的个人问题关联起来：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example –

它刚刚被标记为昆汀重复，这显然不是帮助我和即时通讯努力将其应用于我的代码... –

这是从引用的问题接受的答案代码：

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

它返回的功能。（返回值传递给addEventListener）。

这是您的等效代码：

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

它只是做的东西再没有返回值（undefined）。

然后，代码：

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

试图绑定undefined作为事件处理程序。

你必须给一个函数传递给addEventListener

来源

2017-04-04 12:42:54 Quentin

请参阅更新后的帖子。 –

从匿名函数访问外部变量

回答

相关问题