Javascript 使用循环指定函数参数

我在一段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，因此每次单击时，它似乎只调用contentfill2。

I-3的值应该绑定到click handler函数；闭包可以提供以下功能：

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

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

i-3的值应绑定到单击处理程序函数；闭包可以提供以下功能：

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

---

BTW，最好使用或登记点击处理程序。

< P>另一种方法，考虑每个元素知道它应该使用什么参数。

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它允许我使用数据属性在文档中预定义参数。有效地将它们从函数参数转换为行为。

< P>另一种方法，考虑每个元素都知道它应该使用什么样的参数。

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它允许我使用数据属性在文档中预定义参数。有效地将它们从函数参数更改为行为