3

クリック時に配列内の値を循環する方法を知りたいですか? 配列の最後の値が表示されたら、次にクリックすると、配列の最初の値が再び表示されます。

近いと思いますが、配列の最後の値に到達したら、最初の値を再度表示する前に 2 回クリックする必要があります。

ここに私の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 に答える