使用循环分配函数参数答案

【问题标题】：Assign a Function Argument with a Loop使用循环分配函数参数
【发布时间】：2012-12-29 02:08:54
【问题描述】：

我在一段 Javascript 代码中有一个列表项数组。我想为每个事件分配一个 onclick 事件处理程序。每个处理程序将是相同的函数，但具有不同的输入参数。现在我有：

function contentfill(i) {
    box = document.getElementById("text");
    box.style.background="rgba(0,0,0,0.8)";
    var content = new Array();
    contentdivs = document.querySelectorAll("#contentfill>div");
    box.innerHTML = contentdivs[i].innerHTML;
}
li[3].onclick = function() {contentfill(0);};
li[4].onclick = function() {contentfill(1);};
li[5].onclick = function() {contentfill(2);};

这很好用，但我想用循环实现同样的事情，例如：

for(i=3;i<=5;i++) {
    j=i-3;
    li[i].onclick = function() {contentfill(j);};
}

但是，这不起作用。由于 j 似乎在循环结束时被定义为 2，所以每次点击时，似乎只调用了 contentfill(2)。

【问题讨论】：

标签： javascript function loops arguments

【解决方案1】：

对于另一种方法，请考虑让每个元素都知道它应该使用什么参数。

for (var i = 0; i < 3; i++) {
    var el = li[i + 3];
    el.dataset.contentIndex = i;
    el.addEventListener('click', contentfill);
}

那么contentfill 将不得不从.dataset 中提取参数，而不是接受参数，当然。（这与 jQuery 的$.data 机制相同。）

我更喜欢这个，因为 (a) 它不会生成大量的小包装，(b) 它允许我稍后检查并可能更改“参数”，并且 (c) 它允许我在使用data- 属性的文档。有效地将它们从函数参数更改为行为。

【讨论】：

【解决方案2】：

i - 3 的值应该绑定到点击处理函数；闭包可以提供此功能：

li[i].onclick = (function(j) {
    return function() {
        contentfill(j);
    }
)(i - 3));

顺便说一句，最好使用addEventListener 或attachEvent 注册点击处理程序。

【讨论】：