javascript - 如何使用javascript替换多个图像

Question

我在 mouseover 和 mouseout 上替换图标图像的代码无法正常工作。我试图在每次 mouseover 时更改每个图标，并在 mouseout 上将其更改回原始图标。我似乎找不到问题，我也想知道是否有任何方法可以简化我的代码。谢谢!

假设所有的id和图片来源都是正确的! Image

window.addEventListener('load', function(){

var oImg1 = document.getElementById("image1").src = "images/fleche1.gif";
var oImg2 = document.getElementById("image2").src = "images/fleche1.gif";
var oImg3 = document.getElementById("image3").src = "images/fleche1.gif";
var oImg4 = document.getElementById("image4").src = "images/fleche1.gif";
var oImg5 = document.getElementById("image5").src = "images/fleche1.gif";
var oImg6 = document.getElementById("image6").src = "images/fleche1.gif";
var oImg7 = document.getElementById("image7").src = "images/fleche1.gif";
var oImg8 = document.getElementById("image8").src = "images/fleche1.gif";
var oImg9 = document.getElementById("image9").src = "images/fleche1.gif";

// Fonction Fleche2
oImg1.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg1.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg2.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg2.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg3.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg3.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg4.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg4.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg5.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg5.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg6.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg6.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg7.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg7.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg8.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg8.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";
// Fonction Fleche2
oImg9.addEventListener("mouseover", function(){
    this.src="images/fleche2.gif";
});
// Fonction Fleche1
oImg9.addEventListener("mouseout", function() {
    this.src = "images/fleche1.gif";

});

Answer 1

代码无效，因为 oImg1,.... 不是 HTML 元素，它们是字符串。var oImg1 = document.getElementById("image1").src = "images/fleche1.gif"; 计算类似。

var oImg1 = document.getElementById("image1").src = "images/fleche1.gif";
var oImg1 = "images/fleche1.gif";

代码太多，因此很可能代码由于任何类型错误而无法正常工作。您应该使用以下方法。

• 为您要选择的所有图像分配相同的类。
• 然后使用 querySelectorAll() 选择它们并使用 forEach() 循环。
• 并在迭代时更改 innerHTML 并添加监听器。

这是一个使用简单 div 的例子

document.querySelectorAll('.test').forEach(x => {
  x.innerHTML = 'default';
  x.addEventListener('mouseover',function(){
    this.innerHTML = 'changed'
  })
  x.addEventListener('mouseout',function(){
    this.innerHTML = 'default';
  })
})

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

正如 @Kaiido 在评论中所建议的“对于浏览器来说，处理委托(delegate)事件总是比处理多个目标上的一堆相同事件更简单。”

因此，基于此，您可以将这两个事件附加到 document 并在 event.target 上使用 matches() 来检查其是否正确元素被点击。一个演示是:

document.querySelectorAll('.test').forEach(x => {
  x.innerHTML = 'default';
});
document.addEventListener('mouseover',function(e){
  if(e.target.matches && e.target.matches('.test'))
    e.target.innerHTML = 'changed';
});
document.addEventListener('mouseout',function(e){
  if(e.target.matches && e.target.matches('.test'))
    e.target.innerHTML = 'default';
})

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>