Question

所以我遇到的问题是我设置的eventlisteners都碰巧使用相同的变量。这就是它的样子：

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

在最后两行中，我设置了eventlisteners。因此，每当我关注输入字段时，无论哪一个tooltip.id始终相同。我在每个循环中检查了input.id之前的不同。

Answer 1

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

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

====代码在这里开始

var toolips = document.getElementsByClassName（“tooltip”）; for（var i = 0; i＆lt; 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"; });

}

====代码在这里结束

使eventlisteners独一无二？

1 个答案: