Javascript 使eventlisteners独一无二？

因此，我遇到了一个问题，我设置的EventListener恰好都使用同一个变量。 这就是它的样子：

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

//准备工具提示
对于（var i=0；i

在最后两行中，我设置了eventlisteners。 因此，每当我聚焦一个输入字段时，无论哪个tooltip.id始终相同。

---

我检查了input.id，然后发现它在每个循环中都不同。

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

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

==代码从这里开始

var toolips=document.getElementsByClassName（“工具提示”）； 对于（变量i=0；i

var offsetTop=0；
var tmp=输入；
while（tmp！=null）
{
offsetTop+=tmp.offsetTop；
tmp=tmp.offsetParent；
}
偏移量-=130；
var offsetLeft=（input.offsetParent.offsetLeft+input.scrollWidth）+50；
tooltip.innerHTML+=“”；
tooltip.style.top=offsetTop+“px”；
tooltip.style.left=offsetLeft+“px”；
//将工具提示id指定给输入
input.tooltipId=tooltip.id；
//添加事件侦听器
addEventListener（“focus”，function（）{document.getElementById（this.tooltipId）.style.display=“block”}）；
addEventListener（“blur”，function（）{document.getElementById（this.tooltipId）.style.display=“none”；}）；

}

---

===代码到此结束

可能重复我知道这是参考问题。非常感谢。（：

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