如何应用所有类名值？ JS答案

【问题标题】：how to apply all class names values ? JS如何应用所有类名值？ JS
【发布时间】：2017-07-20 21:58:23
【问题描述】：

我正在尝试在 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>

【问题讨论】：

你能展示一下 HTML 吗？查看 HTML 的结构可能有助于提供解决方案。
querySelector 只返回一个元素。 querySelectorAll可以返回多个
我已经添加了html代码
你的 html 中没有一个 img 标签
请编辑 HTML 以仅显示与您的问题相关的部分。我可以看到您将在一个表格中显示多个<img src="images/com.png" height="30px"></a><p class="done-text"><p>。

标签： javascript jquery html css selectors-api

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：

但这需要鼠标悬停事件中的另一个循环，对吗？正如您的解决方案建议将给出以下错误Cannot set property 'innerHTML' of undefinedjsfiddle.net/hz0mo6a0
不是真的，这要看你想做什么，我加了一个完整的例子
嗯，您的原始答案建议进行一项小改动。您的更新现在包括其他可以产生有效解决方案的更改。你不能假设其他人会在不解释更改原因的情况下知道如何进行微小的更改。现在你的答案很好:)

【解决方案3】：

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

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

你想要做的是：

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

【讨论】：

【解决方案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>

【讨论】：