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

【问题标题】：this.src.replace img src for multiple imagesthis.src.replace img src 用于多个图像
【发布时间】：2017-02-07 16:11:39
【问题描述】：

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

我已经设法为一张图片做到了，通过

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

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

提前非常感谢！

【问题讨论】：

【解决方案1】：

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

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

您可以继续使用第一种方式调用该函数：

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

【讨论】：

【解决方案2】：

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

onmouseover=colorImage(image1)

它需要像你传递一个字符串一样用引号引起来（如下所示）

onmouseover=colorImage('image1')

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

【讨论】：