Question

基本上我的代码可以使用，但我最近发现它有一个问题。当我运行它时，图片看起来顺序错误。我用谷歌浏览器运行它并使用检查元素我发现它进入的顺序是image1＆gt; image4＆gt; image1＆gt; image2＆gt; image4＆gt; image1依次按顺序但是起始顺序不正确我似乎无法找到源码问题和运行它与谷歌chromes html控制台似乎无法找到问题。

<html>
<body>

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="image1.jpg">

<button type="button" onclick="nextLightClick()">Next Light</button>

<script>

var lights = new Array("image2.jpg","image4.jpg","image1.jpg");



var index = 0;
var lightsLen = lights.length;

function nextLightClick() {
    index++;

    if (index == lightsLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = lights[index];
}
</script>

</body>
</html>

Answer 1

这不是一个异常现象，你在之前增加你的索引计数器你运行你的其余功能所以第一张图像是[1]索引而不是[0]

将它移动到函数的末尾，它可以按预期工作。

function nextLightClick() { if (index == lightsLen) index = 0; var image = document.getElementById('starting_light'); image.src = lights[index]; index++; }

https://jsfiddle.net/vju0sy4w/1/

Answer 2

井数组从索引0开始，你立即递增你的计数器，所以索引将从1开始（第二项）。试试这个：

(function() {
  var srcIndex = -1, // Start at -1 since you're incrementing right off the bat (first index will be zero)
      lightsLen = lights.length,
      image = document.getElementById('starting_light');

  // If this needs to be global
  window.nextLightClick = function() {
    srcIndex++;

    if (srcIndex === lightsLen) { 
      srcIndex = 0;
    }

    image.src = lights[srcIndex];
  };
})();

在java脚本中编码异常，似乎无法找到问题

2 个答案: