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元素，那么你可以为需要触发它的所有图像添加一个类，然后使用document.getElementsByClassName('classname')而不是document.getElementsByTagName('img')