Question

我想知道如何在点击时循环访问数组中的值？当显示数组的最后一个值时，下一次单击应该再次显示该数组的第一个值。

我认为我很接近，但是当我到达数组的最后一个值时，我必须再次点击两次才能再次显示第一个值。

这是我的JavaScript：

var myArray = ["red", "yellow", "green"];
var myIndex = 1;
var print = document.getElementById('print');

print.innerHTML = myArray[0]; //Print first value of array right away.

function nextElement() {
  if (myIndex < myArray.length) {
     print.innerHTML = myArray[myIndex];
     myIndex++;
  }
  else {
     myIndex = 0;   
  }
};

这是我的HTML：

<p>The color is <span id="print"></span>.</p> 

<a id="click" href="#" onclick="nextElement();">Click</a>

如果有用的话，这是一个小提琴：

http://jsfiddle.net/jBJ3B/

Answer 1

你可以像这样使用模运算符：

function nextElement() {
  print.innerHTML = myArray[myIndex];
  myIndex = (myIndex+1)%(myArray.length);
  }
};

请参阅：http://jsfiddle.net/jBJ3B/3/

更为极端的是（正如zdyn所写）：

function nextElement() {
   print.innerHTML = myArray[myIndex++%myArray.length];
};

请参阅：http://jsfiddle.net/jBJ3B/5/

Answer 2

尽可能简洁：

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length]
}

Answer 3

var print = document.getElementById（'print'）;

为什么要为此分配变量？为什么不写呢

document.getElementById（'print'）。innerHTML = myArray [0]; //立即打印数组的第一个值。 document.getElementById（'print'）。style.color = myArray [0]; //设置id打印的颜色。

单击循环数组

3 个答案: