点击时循环遍历数组

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>

这是一个 JSFiddle 的链接，如果有帮助的话可以查看一下这个链接：

http://jsfiddle.net/jBJ3B/

- Mdd

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/

- Menelaos

---

谢谢。我想我有点困惑，因为myArray.length返回值为3，但是myArray的最后一个位置是2。非常感谢！ - Mdd

Answer 2

好的，我会尽力进行翻译。请提供需要翻译的具体内容。

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

- zdyn

Answer 3

var print = document.getElementById('print');

为什么要给它分配一个变量？ 为什么不直接写：

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

- d delep

---

因为这样我只需要输入一次 document.getElementById('print')。我认为将其分配给一个变量也会缓存对DOM元素的引用，因此不必再次查找它。 - Mdd