0

そのため、セットアップしたイベントリスナーがすべて同じ変数で機能するという問題があります。これは次のようになります。

// 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"; });
}

最後の 2 行で、イベントリスナーを設定します。そのため、どの tooltip.id が常に同じであっても、入力フィールドにフォーカスするたびに。すべてのループで異なる前に、input.idを確認しました。

4

1 に答える 1

0

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

解決策は次のとおりです (メソッド 'document.getElementsByClassName("tooltip")' は、DOM トラバースが発生するため、1 回だけ呼び出すことをお勧めします。

==== コードはここから始まります

var toolips = document.getElementsByClassName("tooltip"); for (var i = 0; i < toolips.length; i++) { var tooltip = toolips[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";


// 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"; });

}

==== コードはここで終わります

于 2012-05-06T11:36:25.700 に答える