将交通灯图像更改为后续颜色错误的功能

Question

我有一个图像元素，还有三个图像(红色.png，琥珀色.png，绿色.png(。我希望我的代码通过单击将图像元素更改为下一个图像。

<img src="Red.png" id="toggleImage" onclick="toggleImage()">

function toggleImage() {
var img1 = "Red.png";
var img2 = "Amber.png";
var img3 = "Green.png";
var imgElement = document.getElementById('toggleImage');
if (imgElement.src = img1) {
imgElement.src = img2;
}
if (imgElement.src = img2) {
imgElement.src = img3;
}
if (imgElement.src = img3) {
imgElement.src = img1
}
}

当红绿灯以红色开始时.png我点击它，它不会改变。

当它以琥珀色开始时.png我点击它，它会变成红色.png并且不会再次更改。

当它以绿色开始时.png单击后它会变为红色.png但再次单击不会更改任何内容。我已经尝试将其作为其他条件，但它不起作用，而是更改为琥珀色.png，而不是红色。

Answer 1

如果使用 else if，因为原来的 if 方法对人眼来说太快了。

function toggleImage() {
var img1 = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Red_Circle%28small%29.svg/1024px-Red_Circle%28small%29.svg.png";
var img2 = "https://www.publicdomainpictures.net/pictures/310000/nahled/yellow-circle.png";
var img3 = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/LACMTA_Circle_Green_Line.svg/1024px-LACMTA_Circle_Green_Line.svg.png";
var imgElement = document.getElementById('toggleImage');

if (imgElement.src == img1) {
// Red to Yellow
imgElement.src = img2;
}
else if (imgElement.src == img2) {
// Yellow to Green
imgElement.src = img3;
}
else if (imgElement.src == img3) {
// Green to Red
imgElement.src = img1;
}

return 0;
}

<img id="toggleImage" onclick="toggleImage()" style="width: 100px; height: 100px; background: black;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Red_Circle%28small%29.svg/1024px-Red_Circle%28small%29.svg.png">

Answer 2

$('img').on({
'click': function() {
document.querySelector('span').textContent = $(this).attr('src');
var src = ($(this).attr('src') === 'image-photo/red-traffic-light-city-street-600w-425010472.jpg')
? 'image-vector/green-traffic-light-isolated-on-260nw-1539482378.jpg'
: 'image-photo/red-traffic-light-city-street-600w-425010472.jpg';
$(this).attr('src', src);
}
});

#img1 {
cursor: pointer;
}
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="https://image.shutterstock.com/">
<img id="img1" src="image-photo/red-traffic-light-city-street-600w-425010472.jpg" height="300" width="300">
<span></span>

希望这可以帮助您了解它将如何工作。围绕自己努力实现任何你想要的。