将红绿灯图像更改为后续颜色错误的功能答案

【问题标题】：Function to change traffic light image to subsequent color error将红绿灯图像更改为后续颜色错误的功能
【发布时间】：2019-12-12 11:32:38
【问题描述】：

我有一个图像元素和三个图像（Red.png、Amber.png、Green.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
    }
}

当红绿灯以 Red.png 开头并且我点击它时，它不会改变。

当它以 Amber.png 开头并且我单击它时，它会变成 Red.png 并且不再更改。

当它以 Green.png 开始时，单击时会变为 Red.png，但再次单击不会改变任何内容。我已经尝试将它作为 else if 条件，但它不起作用，而是变为 Amber.png，而不是红色。

【问题讨论】：

你需要写imgElement.src == img1而不是imgElement.src = img1。如果您使用单个=，则不是比较而是分配。
如果/否则是强制性的。否则，多个 if 语句将是真的，结果不是你想要/期望的。

标签： javascript html image traffic

【解决方案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;
}

&lt;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"&gt;

【讨论】：

【解决方案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>

希望这可以帮助您了解它的工作原理。围绕自己工作以实现您想要的任何目标。

【讨论】：