將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>