Javascript 能否将带有参数的处理函数附加到循环中多个元素的onclick事件？

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

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

for（变量i=0；i<18；i++）{
document.getElementById（'tat'+i）.onclick=function（）{display（i）；}；
}

（我的缩略图都有

id=“tat0”

，

id=“tat1”

，

id=“tat2”

，

id=“tat3”

等。） （

display（）

将缩略图表示的较大图片加载到单独的元素中）

---

每个缩略图都有这个onclick函数，因此我知道for循环通过其ID正确地访问每个缩略图（对每个I进行单步访问），那么为什么所有的

display（I）

都被分配到18？您可以分配onclick函数来处理参数吗？

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

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

for（变量i=0；i<18；i++）{
document.getElementById（'tat'+i）.onclick=genHandler（i）；
}

如果只是将“i”作为参数添加到函数中，它也可能会起作用。

将onclick处理程序包装到函数中，将创建一个包含当前作用域的闭包

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

for（变量i=0；i<18；i++）{
document.getElementById（'tat'+i）.onclick=（函数（a）{
返回（函数（）{
显示器（a）；
});
})（i） )；
}​

问题底线的可能重复：每个事件处理程序引用相同的

i

。循环完成后，

i

的值为

18

。解决方案是生成不共享同一变量的事件处理程序。这与

getElementById

和

onclick

都没有关系。你是对的，我不得不回过头来用另一种方式来处理它：function initOnClick（）{var images=document.getElementById（“thumbs”）.getElementsByTagName（“img”）；for（var t=0；tgenHandler实际上不是闭包。哪个函数？您的意思是

function（i）{display（i）；}”那不行。传递给事件处理程序的第一个参数是事件对象，如果有的话（即）。你是对的……一个hack:
函数（）{display（this.id.substr（3））；}；
可以使用，如果id是“tat0”类型，就像你的一样。