Question

我已经在这个代码上工作了几个星期，我向老师寻求帮助，他添加了这一行firstlight.src = list[nextlight];，这使得一切正常。他向我解释了这一点但我没有说明这一点以及它是如何运作的。有人可以向我解释为什么我们将源图像列为[nextlight]列表吗？

我的代码：

<!DOCTYPE html> 
<html> 
<body>  

  <h1>JavaScript Code</h1> 
  <p>Traffic Light</p> 

<img id="traffic" src="only red1.jpg">
  <button type="button" onclick="ChangeLight()">Change Light</button>  



  <script> 
    var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
    var nextlight = 0;
    function ChangeLight() {
      nextlight = nextlight + 1;      
      if (nextlight == list.length) 
        nextlight = 0;      
      var firstlight = document.getElementById('traffic');     
      firstlight.src = list[nextlight]; 
    } 
  </script>  
</body> 
</html>

Answer 1

有一个名为nextLight的全局变量，它等于0。按下按钮后，该功能会增加此数字，因此nextLight为1。

然后检查新号码是否等于列表的长度。如果相等，则表示应再次选择第一张图片。

为什么呢？因为JavaScipt中的数组具有0基索引，这意味着4个元素的数组长度为4，但最后一个索引为3，因为它从0,1,2,3开始。

然后，对于每次点击，它会更改图片的src firstlight.src = list[nextlight]，并在list[0]，list[1]，list[2]，{list[3]处更改每个相应的网址。 {1}}当它到达索引4时，它会再次重置为list[0]。

Answer 2

该行

firstlight.src = list[nextlight];

将图像元素的src属性设置为列表中的下一个图像。它实际上等同于

<img id="traffic" src="only red1.jpg"/> <!-- after the first click -->
<img id="traffic" src="red-yellow 2.jpg" /> <!-- after the second click -->
<!-- and so on.. -->

这是有效的，因为您的图像名称与网页本身位于同一工作目录中的list[]数组中的名称完全相同; nextlight是list中红绿灯下一张图片的号码或位置：

list[0] == "only red1.jpg", list[1] == "red-yellow 2.jpg", // and so on because..
nextlight == 0,             nextlight == 1

希望这有帮助！

列表[nextlight]在此代码中做了什么？

2 个答案: