3

我想知道如何在单击时循环遍历数组中的值?当显示数组的最后一个值时,下一次单击应该再次显示数组的第一个值。

我认为我已经接近了,但是当我到达数组的最后一个值时,我必须单击两次才能再次显示第一个值。

这是我的 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/

4

3 回答 3

9

您可以像这样使用模运算符:

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/

于 2013-06-20T01:15:34.830 回答
2

尽可能简洁:

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length]
}
于 2013-06-20T01:19:27.450 回答
1

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

为什么要为此分配一个变量?为什么不写

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

于 2017-01-26T03:54:59.037 回答