javascript 将文本更改为悬停时元素的替代文本

Question

我有一系列图片，悬停时，我希望它们能更改 <span> 元素的文本。我之前用一些非常多余的 javascript 完成了此操作，更改了每个图像的每个 onMouseIn 和 onMouseOut 上 <span> 的文本，每个图像都有一个唯一的 ID。我使用了这个代码，重复了几次：

window.onload = function () {
document.getElementById("foo").onmouseover = function () {
    document.getElementById("element").innerHTML = "bar";
};

document.getElementById("foo").onmouseout = function () {
    document.getElementById("element").innerHTML = "bar";
};

但我想知道是否有更简单的方法，使用图像的 alt 标签。在图像悬停时，我希望 <span> 标签显示悬停图像的 alt 文本，然后 onMouseOut 恢复正常。这将如何完成？谢谢。

Answer 1

您可以使用如下标签名称获取页面中的所有元素并添加事件处理程序

window.onload = function() {
  var imgs = document.getElementsByTagName('img'),
    span = document.getElementById("element");
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('mouseenter', function() {
      span.innerHTML = this.alt || '';
    });
    imgs[i].addEventListener('mouseleave', function() {
      span.innerHTML = '';
    });
  }
}

<span id="element"></span>
<br />
<img src="//placehold.it/64X64&text=1" alt="img 1" />
<img src="//placehold.it/64X64&text=2" alt="img 2" />
<img src="//placehold.it/64X64&text=3" alt="img 3" />
<img src="//placehold.it/64X64&text=4" alt="img 4" />

如果你不想定位所有的img元素，那么你可以在所有需要触发它的图像上添加一个class，然后使用document.getElementsByClassName('classname')而不是[=13] =]

javascript 将文本更改为悬停时元素的替代文本

javascript change text to element's alt text on hover

html

javascript

alt