javascript - Mootools 在 for 循环上设置事件

Question

我有一个关于 Mootools 事件处理的问题...

有一种情况，你有一个循环，并且为每个循环创建一个 div 并在其上附加一个事件。它始终采用循环的最后一个周期的值。

喜欢:

for(var i=0;i<10;i++) {
 var el = new Element('div').inject($(document.root));
 el.addEvent('click',function() {
  alert(i); 
 });
}

所有元素都会提醒“10”。我想要的是让每个新元素计数+1。第一=0，第二=1，...

希望有人能明白我的意思。提前谢谢!

Answer 1

在添加到局部变量时使用闭包封装迭代器:

for(var i=0;i<10;i++) {
    var el = new Element('div').inject($(document.root));
    (function(i){    
        el.addEvent('click',function() {
            alert(i); 
        });
    }(i));
}

思想流派认为你不应该在循环中创建函数。

您可以做的其他事情是将迭代器传递给构造函数并将其保存在存储中:

var el = new Element('div').store('index', i).inject(document.body);
...
click: function(){
    console.log(this.retrieve('index'));        
}

您还可以使用 .each 它会自动为您创建迭代器:

var a = new Array(10);
a.forEach(function(item, index){
    new Element('div', {
        events: {
            click: function(){
                alert(index);
            }
        }
    }).inject(document.body);
});

你也可以将它绑定(bind)到回调...很多很多模式。