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

在最后两行中，我设置了事件监听器。因此，每当我关注一个输入字段时，无论哪一个 tooltip.id 总是相同的。我在每个循环中都检查了 input.id 之前的不同。

4

1 回答 1

0

Javascript 是一种有趣的语言 :)
在每个循环中，您都在声明一个使用对变量工具提示的引用的函数。由于您多次使用该变量：它的值发生了变化，但引用保持不变。当函数执行时，它使用引用（具有最后一个值）。

这是解决方案：（我建议只调用一次方法'document.getElementsByClassName（“tooltip”）'，因为它会导致DOM遍历。

==== 代码从这里开始

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