javascript - 将数组[索引]传递给函数

Question

function setclass(element, classname) {
    console.log("event");
    console.log(element);
    element.classList.add(classname);   
    console.log(element.outerHTML);
}

var tpa = document.querySelectorAll("#topnav a");

for(var i=0; i<tpa.length; i++) {
    tpa[i].onclick = () => setclass(tpa[i], "current");
}

我不明白为什么元素不通过setclass(tpa[i],...)传递给setclass。 console.log(element) 记录“未定义”，并且后面的所有内容都会失败，因为元素未定义。

另一方面，这按预期工作:

var tpa = document.querySelectorAll("#topnav a");
tpa[0].onclick= () => setclass(tpa[0], "current");

Answer 1

for(var i=0; i<tpa.length; i++) {
  (i=> tpa[i].onclick = () => setclass(tpa[i], "current"))(i);
}

onclick 将在循环迭代后发生。因此 tpa[i] 将指向最后一个元素。您可以像上面的代码一样通过 IIFE 绑定(bind) i，或者使用上下文:

for(var i=0; i<tpa.length; i++) {
tpa[i].onclick = function(){ setclass(this, "current")};
}