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。 Frist = 0，second = 1，...

希望有人明白我的意思。 Thx提前！

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

你可以将它绑定到回调...许多模式。

Answer 2

找到一种解决方法，不确定它是否符合您的要求。

检查小提琴here

JS / Mootools的：

for(var i=0;i<10;i++) {
 var el = new Element('div', {onclick: 'alert('+i+')',text:i}).inject(document.body);
}

Mootools为循环设置事件

2 个答案: