Question

单击时需要一个按钮，显示特定图像。但是再次点击时，需要显示不同的图像。显示的图像按照我希望它们显示的顺序存储在一个数组中。我已经使用一个函数将一个图片更改为按钮单击下的下一个图片，但是当我尝试更改为第三个图像时，它会跳过第二个图片。我该怎么做？到目前为止，这是我的代码：

<img id="red" src="traffic-light-red.jpg">

<button onclick="myFunction()">Click me</button>
<p id="change"></p>
<script>

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]

var image = document.getElementById("red")

function myFunction() {
    document.getElementById("change");
    image.src = lights[1]
}

</script>

Answer 1

从上面的代码中，您似乎始终将索引设置为1（image.src = lights[1]），当您单击按钮时，该索引将始终加载第二个图像。您应该将加载的图像的当前索引分配给变量并增加它。

[编辑] 在下面的答案中，选择基于索引的图像，该图像在第一个图像中被初始设置为零，然后递增索引。我还检查索引的值，如果它等于灯光阵列中的最后一个元素，那么我将它重置为零，这将返回到起始图像。

如下：

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]
var index = 0;
var image = document.getElementById("red")

function myFunction() {
    document.getElementById("change");

    image.src = lights[index]
    index++;
    if(index >= lights.length) {
        index = 0;
    } 
}

还要注意数组和数组索引。下面的数组的长度为5，但它的第5项的索引为4.这是因为length属性将返回项目数，但javascript（与大多数编程语言一样）从零开始计数。

这就是为什么我在上面if(index >= lights.length)的答案中检查大于或等于，如果索引等于4那么它将在arrray中寻找第五个元素，而不是＆＃ 39; t存在。（我可能不需要大于tbh，但我认为将其包括在内是一种很好的做法）。

var arr = ["item1","item2","item3","item4","item5"];
console.log(arr[0]) // item1 - First element, index 0
console.log(arr[4] // item5 - Fifth element, index 4

Answer 2

可以尝试以下代码来执行您想要的操作。保持变量在函数外面说“计数器”。

点击按钮，获取灯光[计数器]并设置为img的来源。然后将计数器增加1.

当它达到数组的长度时，再次使计数器'0'。这样它就可以从第一张图片开始了。

var counter = 0;

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]

var image = document.getElementById("red");

function myFunction()
{
  image.src = lights[counter];
  console.log(image.src);
  counter += 1;
  
  if(counter == lights.length)
    {
      counter = 0;
      }
}

<img id="red" src="traffic-light-red.jpg">

<button onclick="myFunction()">Click me</button>
<p id="change"></p>

Answer 3

使用它：

<button id="" onclick="lights()">Click me</button>
<img id="red" src="add file name">

<script>
function lights(){
    var sequence=[your files];
    var image = document.getElementById('red');
    var i = 0;
    intervalHandler = setInterval(function(){
    var colour=sequence[i]
    image.src = colour;
    i++;
    if(i>=sequence.length) {
        clearInterval(intervalHandler);
    }
    },1000)
    }
</script>

Answer 4

试试这个：使用隐藏字段存储当前图像并在每次点击时获得增量值

<input type="hidden" name="imageindex" id="imageindex" value="0">

在你的函数“myFunction（）”上创建逻辑以获取和增加imageindex值。如果imageindex的值大于图像数组，则重置为0.请从以下Javascript代码中获取参考。

var currentindex = $("#imageindex").val();
var totalimages = lights.length;

if( currentindex > totalimages ) {
    currentindex = 0;
}
image.src = lights[currentindex];

//New Index
var newindex = currentindex + 1;

//Set new index value
$("#imageindex").val(newindex);

如何在JavaScript中为不同的操作使用相同的按钮？

4 个答案: