單擊循環數組

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打印的顏色。