带有更改图像函数的 if/else 语句不适用于多个图像

Question

我对javascript很陌生，需要一些帮助。我的目标是有 3 张您点击之前的照片以显示之后的照片(狗美容网站)。只有一张之前/之后的照片，代码工作正常，但所有 3 张照片只有最后一张功能正常。关于我做错了什么的任何想法？if/else 语句对我来说仍然很新，不确定我是否正确使用它们。

<p>Click the dog to <br>show their transformation.</p>
<img id="dog1" onclick="changeImage()" src="images/dog1before.PNG" width="300" >
<br>
<img id="dog2" onclick="changeImage()" src="images/dog2before.PNG" width="300" >
<br>
<img id="dog3" onclick="changeImage()" src="images/dog3before.PNG" width="300" >
<script>
//dog1 before and after
function changeImage() {
var image = document.getElementById("dog1");
if (image.src.match("dog1after")) {
image.src = "images/dog1before.PNG";
} else {
image.src = "images/dog1after.PNG";
}
}
//dog2 before and after
function changeImage() {
var image = document.getElementById("dog2");
if (image.src.match("dog2after")) {
image.src = "images/dog2before.PNG";
} else {
image.src = "images/dog2after.PNG";
}
}    
//dog3 before and after
function changeImage() {
var image = document.getElementById("dog3");
if (image.src.match("dog3after")) {
image.src = "images/dog3before.PNG";
} else {
image.src = "images/dog3after.PNG";
}
}    
</script>

Answer 1

onclick回调函数名称相同，请尝试将它们更改为changeImageA，changeImageB和changeImageC或其他东西。

一旦你有了这个，最好使用一个函数，传入一个参数并做一个switch语句，或者if/else根据点击的图像来改变图像。

Answer 2

对所有图像使用一个函数：

<p>Click the dog to <br>show their transformation.</p>
<img id="dog1" onclick="changeImage()" src="images/dog1before.PNG" width="300" >
<br>
<img id="dog2" onclick="changeImage()" src="images/dog2before.PNG" width="300" >
<br>
<img id="dog3" onclick="changeImage()" src="images/dog3before.PNG" width="300" >
<script>
function changeImage(event) {
var image = document.getElementById(event.target.id);
if (image.src.match("after")) {
image.src = "images/" + event.target.id + "before.PNG";
} else {
image.src = "images/" + event.target.id + "after.PNG";
}
}   
</script>

Answer 3

下面是使用数据集的简单方法：

<script>
function changeImage(elm) {
var after = elm.dataset.after;
var src = elm.getAttribute('src');
if (after && src !== after) {
elm.setAttribute('src', after);
}
}
</script>
<img src='images/dog1before.PNG' data-after='images/dog1after.PNG' onclick='changeImage(this);' />
<img src='images/dog2before.PNG' data-after='images/dog2after.PNG' onclick='changeImage(this);' />
<img src='images/dog3before.PNG' data-after='images/dog3after.PNG' onclick='changeImage(this);' />