将数组[索引]传递到函数

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（元素）日志“未定义”，随后的一切都失败，因为元素未定义。

在另一方面，这种按预期工作：后您的循环有iterated.Therefore万吨[I]将指向最后一个元素会发生

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。你可能会结合我的低谷像IIFE上面的代码中，或使用背景：

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

Answer 2

绑定创建都具有这个传递给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>