配列[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（要素）は "undefined"を記録し、要素が未定義であるため、それ以降のすべてが失敗します。一方

が、これは期待通りに動作します：あなたのループがiterated.Therefore TPA [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のが発生します。

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>