イベントリスナーを一意にするには？

Question

私はeventlisteners私はセットアップがすべて同じ変数で動作するように起こる問題があります。 これはどのように見えるかです：私はイベントリスナーを設定する最後の2行で

// Prepare tooltips 
for (var i = 0; i < document.getElementsByClassName("tooltip").length; i++) { 

    var tooltip = document.getElementsByClassName("tooltip")[i]; 
    var input = document.getElementsByName(tooltip.id.substr(8))[0]; 

    var offsetTop = 0; 
    var tmp = input; 

    while (tmp != null) { 
     offsetTop += tmp.offsetTop; 
     tmp = tmp.offsetParent; 
    } 

    offsetTop -= 130; 

    var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50; 

    tooltip.innerHTML += "<div class='corner'></div>"; 
    tooltip.style.top = offsetTop + "px"; 
    tooltip.style.left = offsetLeft + "px"; 

    input.addEventListener("focus", function() { document.getElementById(tooltip.id).style.display = "block"; }); 
    input.addEventListener("blur", function() { document.getElementById(tooltip.id).style.display = "none"; }); 
} 

。 入力フィールドをフォーカスするたびに、どちらのtooltip.idも常に同じです。 すべてのループでinput.idが異なる前にチェックされました。

Answer 1

Javascriptは面白い言語です:)
各ループで、変数ツールチップへの参照を使用する関数を宣言しています。 変数を何度も使用するため、その値は変更されますが、参照は同じままです。 関数が実行されると、参照（最後の値を持つ）が使用されます。ここで

は、ソリューションです：。 （私はそれがDOMのトラバースの原因となるので、一度だけの方法 'document.getElementsByClassName（ "ツールチップ"）' の呼び出しをお勧めします

==== CODEはこちら

VARを開始しますtoolips = document.getElementsByClassName（ "ツールチップ"）; （VAR i = 0; I < toolips.length; iが++）のため {VARツールチップ= toolips [I]; VAR入力= document.getElementsByName（tooltip.id。 substr（8））[0];

var offsetTop = 0; 
var tmp = input; 

while (tmp != null) 
{ 
    offsetTop += tmp.offsetTop; 
    tmp = tmp.offsetParent; 
} 

offsetTop -= 130; 

var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50; 

tooltip.innerHTML += "<div class='corner'></div>"; 
tooltip.style.top = offsetTop + "px"; 
tooltip.style.left = offsetLeft + "px"; 


// assign tooltip id to the input 
input.tooltipId = tooltip.id; 

// add event listeners 
input.addEventListener("focus", function() { document.getElementById(this.tooltipId).style.display = "block"; }); 
input.addEventListener("blur", function() { document.getElementById(this.tooltipId).style.display = "none"; }); 

}

====コードをここに