javascript - Dom 元素 onclick (MooTools::可选)

Question

考虑以下示例:

function async_callback(array1, array2, array3) {
  // All arrays are equal length

  for(var i = 0; i < array1.length; i++) {
    var myElement = new Element('div', { 'id': 'dvMy' + i, 'events': { 'click': function() { SomeFunction(array1[i], array2[i], array3[i] } }});
    $(document).appendChild(myElement);
  }
}

现在，当我单击元素时，所有三个参数都为空值。 我什至尝试这样做:

myElement.onclick = SomeFunction; // but this won't allow arguments

我知道我可以创建一个字符串并使用 eval() 这确实有效，但我不喜欢 eval()。

有什么想法吗？

顺便说一句:这是一个复制问题的简单示例，而不是实际代码。

Answer 1

这是您的处理程序:

function() { SomeFunction(array1[i], array2[i], array3[i] } }

执行时，循环将完成并且 i因此将等于length数组的，根据条件语句 ( i < array1.length ) 和迭代语句 ( i++ )。

解决此问题的最简单方法是将处理程序包装在另一个立即执行的函数中，并传递 i对它来说， -- 这将具有保留 i 的值的效果。在新的闭包中:

for(var i = 0; i < array1.length; i++) {
    var myElement = new Element('div', { 'id': 'dvMy' + i, 'events': {
        'click': (function(i){
            return function() { SomeFunction(array1[i], array2[i], array3[i] } };
         }(i))
    });
    $(document).appendChild(myElement);
}