Question

我正在尝试为从数据库动态填充的缩略图设置onclick事件。我需要设置函数来处理一个参数，这是缩略图代表的更大图片的id。我现在的代码设置所有缩略图指向＃18。如果你在for循环中看到它应该死在17。

for (var i = 0; i < 18; i++) {
    document.getElementById('tat' + i).onclick = function() { display(i); }; 
}

（我的缩略图<img />都有id="tat0"，id="tat1"，id="tat2"，id="tat3"等。）（display()将缩略图所代表的较大图片加载到单独的元素中）

每个缩略图都有这个onclick函数，所以我知道for循环正在通过它的ID正确访问每一个（逐步执行每个i）所以为什么所有display(i)被分配到18？你能指定一个onclick函数来处理参数吗？

Answer 1

您需要一个闭包函数来生成处理程序。

function genHandler( param ) {
  return function() {
     // use all params in here
     display( param );
  }
}

然后以类似方式分配您的活动

for (var i = 0; i < 18; i++) {
  document.getElementById('tat' + i).onclick = genHandler( i );
}

Answer 2

如果您只是将'i'作为参数添加到您的函数中，它也可能有用。

Answer 3

在函数中包装onclick处理程序将创建一个带有当前范围的闭包。

for (var i = 0; i < 18; i++) {
    document.getElementById('tat' + i).onclick = (function(a) {
        return (function() {
            display(a);
        });
    })(i);
}

你能为循环中的许多元素附加一个带有onclick事件参数的处理函数吗？

3 个答案: