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

How to use the same button for different actions in JavaScript?

本文关键字：操作 按钮 JavaScript      更新时间：2023-09-26

单击时需要一个显示特定图像的按钮。但当再次单击时，需要显示不同的图像。显示的图像按照我希望它们显示的顺序存储在阵列中。我使用了一个功能，可以在点击按钮时将一张图片更改为下一张图片，但当我尝试更改为第三张图片时，它会跳过第二张。我该怎么做？这是我迄今为止的代码：

<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>

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

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

如下：

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，但它的第五个项目的索引为4。这是因为length属性将返回项目数，但javascript（像大多数编程语言一样）从零开始计数。

这就是为什么我在if(index >= lights.length)上面的答案中检查是否大于或等于，如果索引等于4，那么它将在arrray中查找不存在的第五个元素。（我可能不需要大于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

可以尝试以下代码来执行您想要的操作。在函数外保留一个变量，比如"counter"。

单击按钮，获取lights[计数器]并将其设置为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>

使用这个：

<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>

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

<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);
相关文章：