用循环分配函数参数

我在一段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）。

来源

2013-01-15 user1978952

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

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

顺便说一句，这是更好的做法是使用addEventListener或attachEvent注册单击处理程序。

来源

2013-01-15 01:52:29

对于其他方法，请考虑让每个元素都知道应该使用哪个参数。

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-属性在文档中预定义它们。有效地将它们从函数参数变为行为。

来源

2013-01-15 02:19:00 Eevee

用循环分配函数参数

回答

相关问题