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的定义。如果在设置侦听器之前设置了自定义属性，那么可以使用＆＃34; this＆＃34;来设置侦听器内部的innerHTML。

Answer 2

怎么样：document.querySelectorAll(".done-text")[i].innerHTML = "MAKE IT DONE!"？

以下是一个例子：

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

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

Answer 3

您的问题是document.querySelector(".done-text")返回没有属性.innerHTML的HTMLCollection

该集合中的每个元素都具有.innerHTML属性。

你要做的是：

＆＃13;

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

＆＃13;

Answer 4

您可以做的最好的事情是使用nextElementSibling，这只需要一个循环，只需要选择一个元素：

Array.from(document.getElementsByTagName('img')).forEach(el => {
  el.addEventListener('mouseover', e => {
    e.target.nextElementSibling.innerHTML = 'triggered';
  });
})

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

如何应用所有类名值？ JS

4 个答案: