Question

<!DOCTYPE html>
<html>
    <head>
        <script>
            var trafficlights = ['redlight.png','yellowlight.png','greenlight.png'];
            var num = 1

            function lightsequence() {
                document.getElementById('light').src = trafficlights[num];
                num = num + 1;
            }
        </script>
    </head>
    <body>
        <img id="light" src="redlight.png">
        <button onclick="lightsequence()">Change Lights</button>
    </body>
</html>

我已经写了那段代码，每次点击按钮时图像都会逐一改变，但是如果我一直点击，我想不出如何改变订单，即交通灯红黄绿黄红等。每次我点击。我不熟悉jQuery，所以不想理想地使用它们，但是如果有人可以用jQuery完全解释它，那就必须这样做。

Answer 1

在这种情况下，

Modulo operator非常方便：

document.getElementById('light').src = trafficlights[num++ % trafficlights.length];

这是一个演示：

＆＃13;

var trafficlights = [
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png', 
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png', 
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png'
];
var num = 1

function lightsequence() {
  document.getElementById('light').src = trafficlights[num++ % trafficlights.length];
}

＆＃13;

<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>

＆＃13;

Answer 2

换灯

function lightsequence(){
  
document.getElementById("light").src

if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"){
     document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"
    
}else if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"){
   document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png"
                         
}else{
   document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"
      
      }
}

<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>

单击按钮时，三个图像之间的javascript更改

2 个答案: