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

以下是使用事件委派的示例。我试图只使用核心JS API，因为你没有提到任何库，但如果你使用的是库，很有可能它可以为你做一些。

document.body.addEventListener('mouseover', function(ev) {
    var target = ev.target,
        cls = target.classList;
    
    if (!cls.contains('seal')) {
        return;
    }
    
    cls.add('seal-over');
    target.innerHTML = target.innerHTML.replace('/seal/', '/seal/hover/');
});

document.body.addEventListener('mouseout', function(ev) {
    var target = ev.target,
        cls = target.classList;
    
    if (!cls.contains('seal')) {
        return;
    }
    
    cls.remove('seal-over');
    target.innerHTML = target.innerHTML.replace('/hover', '');
});

.seal {
    border: 1px dotted #777;
    height: 70px;
    margin: 10px;
    width: 200px;
}

.seal-over {
    background: #eee;
}

<div class="seal">img/seal/dantalion.png</div>
<div class="seal">img/seal/vassago.png</div>

虽然我的示例更改了innerHTML，但您会更改src - 我没有您的图片，所以我无法轻松使用img标记。 id属性必须是唯一的，因此我将其更改为使用class。添加seal-over类不是必需的，我只是认为它使示例更有趣：如果这是真正的代码，你可能会使用CSS :hover伪类。

许多指导指南中的一个，您可以通过在线快速搜索找到其他人：

https://davidwalsh.name/event-delegate

这个想法是在树上方的元素上添加一个侦听器。事件会传播，因此您可以对后代元素上的事件做出反应。事件target指的是发生实际事件的元素。代码检查此元素是否是我们关心的元素之一，然后相应地进行更改。

Answer 2

这是解决您问题的简单方法。在包装器div mouseover的{{1}}上，我们检查您是否正在悬停图像，如果是，请使用悬停网址更新图像src。

在#images上或如果您将鼠标悬停在其他图像上，图像会重置回原来的src

mouseout

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

如何在JS中指定多个对象？

2 个答案: