javascript - 使用 JQuery 在 JavaScript 中循环遍历数组

Question

我来自 Ruby 背景，如果这是一个业余问题，请原谅我。我有一个颜色选择器，其中一段会更改其文本以匹配颜色

<button class="btn btn-primary">Please Select a Color</button>
<p class="color-select"></p>

JavaScript/Jquery

var colors = ["red", "green", "yellow", "red", "purple"];

$(document).ready(function() {
  $("button").click(function() {
    $(".color-select").html(colors[Math.floor(Math.random() * 5)]);
  });
});

如您所见，我很清楚如何在 JavaScript 中选择随机元素。在 Ruby 中，它会更简单

colors.sample

但我想做的是循环显示颜色。如果我单击该按钮，文本将显示为 red。如果我再次单击它，文本将显示为 green。文本为紫色后，它将循环回红色并不断循环各种颜色。

我有一个疯狂、古怪的想法如下。

var i = 0;
while (i < colors.length) {
  $('.color-select').html(colors[i]);
  i++;
  if (i == 4) {
    i = 0
  }
}

这可能行不通，因为无需单击按钮即可更改文本。有什么想法吗？

这是一个 fiddle

http://jsfiddle.net/c7ea2m6f/

Answer 1

这对你有用。

var colors = ["red", "green", "yellow", "red", "purple"];

$(document).ready(function () {
    var i = 0;
    $("button").click(function () {
        $(".color-select").html(colors[i]);
        i++;
        i = i % 5;
    });
});

DEMO