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; //但这不允许参数我知道我可以创建一个字符串并使用eval（）并且确实有效，但我不喜欢eval（）。

任何想法???

btw：这是一个复制问题的简单示例，而不是实际的代码。

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

Answer 2

这是一个经典：当click处理程序运行时，i被设置为它在循环中到达的最后一个值，在本例中为array1.length。要获得所需内容，您需要调用函数来创建单击处理程序并将其传递给i：

function async_callback(array1, array2, array3) {
  function createClickHandler(n) {
    return function() {
      SomeFunction(array1[n], array2[n], array3[n]);
    };
  }

  // All arrays are equal length
  for(var i = 0; i < array1.length; i++) {
    var myElement = new Element('div', {
      'id': 'dvMy' + i,
      'events': {
        'click': createClickHandler(i)
      }
    });
    $(document).appendChild(myElement);
  }
}

Dom Element onclick（MooTools ::可选）

2 个答案: