將數組[索引]傳遞到函數

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>