我在一段 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)。
最佳答案
对于另一种方法,考虑让每个元素都知道它应该使用什么参数。
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-
属性的文档。有效地将它们从函数参数更改为行为。
关于javascript - 使用循环分配函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14329907/