将array [index]传递给函数

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绑定我，或者使用上下文：

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

Answer 2

Bind创建一个新函数，该函数会将其设置为传递给bind()的第一个参数。

 function setclass(element, classname, event) { console.log(event); console.log(element); element.classList.add(classname); console.log(element.outerHTML); } var tpa = document.querySelectorAll("#topnav a"); var i, len = tpa.length; for(i=0; i<len; i+=1) { tpa[i].onclick = setclass.bind(this, tpa[i], "current"); } 

 <div id="topnav"> <a>sfdg</a> <a>sfdg</a> <a>sfdg</a> <a>sfdg</a> <a>sfdg</a> <a>sfdg</a> </div>