javascript - 如何应用所有类名值？ JS

Question

我正在尝试在 img 按钮下方添加一个文本，当用户将鼠标悬停在它上面时(mouseover)，它会在图像下方显示一个文本。

当我测试这段代码时:

var x = document.querySelectorAll("img")
var i;
for (i=0; i<x.length; i++) {
    x[i].addEventListener('mouseover', function(e){
        console.log("boom!");
    }, false);
}

每次我浏览任何图像时，console.log 都会工作，但是当我尝试这样做时:

var x = document.querySelectorAll("img")
var i;
for (i=0; i<x.length; i++) {
    x[i].addEventListener('mouseover', function(e){
        document.querySelector(".done-text").innerHTML = "MAKE IT DONE!"
    }, false);
}

只有第一个 img 按钮会显示文本。这是一行具有相同类的图像按钮。

我试过 selectorAll 但它一直在控制台上显示错误。感谢您的帮助。

亚当。

HTML:

<img src="images/com.png" height="30px"><p class="done-text"><p></td>

Answer 1

我还不能发表评论 - @luisenrike 更改为

    var x = document.querySelectorAll("img")
    var i;
for (i = 0; i < x.length; i++) {
  (function(i) {
x[i].doneText = document.querySelectorAll(".done-text")[i];
x[i].addEventListener('mouseover', function(e) {
     this.doneText.innerHTML  = "MAKE IT DONE!"
    }, false);
  })(i);
}

抱歉，如果格式不正确 - 移动设备不显示预览。 :-)

Luisenrike 的解决方案很好，但没有考虑事件监听器中的上下文 - 它在调用时不知道 i 的定义。如果您在设置监听器之前设置自定义属性，那么您可以使用“this”在监听器中设置它的 innerHTML。