javascript - JS中如何指定多个对象？

Question

所以我正在尝试编写一个代码，允许我将鼠标悬停在图像上后更改图像。

初始代码有效。但我还有 72 张其他图像需要使用此功能进行检查。我试图单独调用每个函数，这样我就不必重复这么多代码。

我想要一个简单的html代码，例如

<img id="seal" src="img/seal/dantalion.png" onmouseover="rollover(dantalion)" 
onmouseout="rollaway(dantalion)" />
<img id="seal" src="img/seal/vassago.png" onmouseover="rollover(vassago)" 
onmouseout="rollaway(vassago)" />

这是有效的代码。

function rollover(img) {img.src = "img/seal/hover/vassago.png";}
function rollaway(img) {img.src = "img/seal/vassago.png";}

这就是我想做的。请记住，我对此类事情很陌生。

function rollover() {
dantalion.src = "img/seal/hover/dantalion.png";
vassago.src = "img/seal/hover/vassago.png";
}
function rollaway() {
dantalion.src = "img/seal/dantalion.png";
vassago.src = "img/seal/vassago.png";
}

如何在 HTML 代码中单独调用对象？

Answer 1

这是解决您问题的简单方法。上mouseover包装 div #images我们检查您是否将鼠标悬停在图像上，如果是，则使用悬停网址更新图像 src。

关于mouseout或者如果您将鼠标悬停在不同的图像上，图像将重置回原始 src

var images = document.getElementById('images');
var prevEl;

function resetImages() {
  if (prevEl) {
    prevEl.src = prevEl.src.replace('/hover', '');
    prevEl = null;
  }
}
  
images.addEventListener('mouseover', function(e) {
  resetImages();
  if (e.target && e.target.nodeName == "IMG") {
    prevEl = e.target;
    e.target.src = e.target.src.replace('/seal', '/seal/hover');
  }
});

images.addEventListener('mouseout', resetImages);

<div id="images">
  <img src="img/seal/dantalion.png">
  <img src="img/seal/vassago.png">
</div>