this.src.replace img src用于多个图像

Question

我想在悬停在图像上时更改图像的来源。

我设法通过

为一张图片做了这件事

<img id="image1" src="image1-grey.png" onmouseover=colorImage(this) />"

和

function colorImage(x){
document.getElementById("image1").src = x.src.replace("grey", "color");
}

我有十几张图片 - 全部有两个版本，灰色和彩色。

现在我想我可以单独为所有图像重复上述功能，但必须有一个更清洁的方式。

这是我想的，但它不起作用：

<img id="image1" src="image1-grey.png" onmouseover=colorImage(image1) />"

和

function colorImage(x){
document.getElementById(x).src = this.src.replace("grey", "color");
}

这样，我想，我只对所有图像都有一个功能。但不是。为什么不呢？

提前多多感谢！

Answer 1

由于您将对图像的引用作为参数传递，因此您不需要使用document.getElementById ...您已经拥有它！

function colorImage(x){
  x.src = x.src.replace("grey", "color");
}

您可以继续使用第一种方式调用该功能：

<img id="image1" src="image1-grey.png" onmouseover=colorImage(this) />

Answer 2

您的问题似乎与下面一行中的image1

有关

onmouseover=colorImage(image1)

它需要在引号中，就像传递字符串一样（如下所示）

onmouseover=colorImage('image1')

现在传递它的方式是发送一个名为image1的javascript变量（可能是undefined）而不是您想要的字符串名称"image1"