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

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

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

如您所见，我非常了解如何在JavaScript中选择随机元素。在Ruby中，它会更简单

colors.sample

但我想做的是在颜色之间循环。如果我点击按钮，文本将显示为红色。如果我再次单击它，文本将显示为绿色。文本为紫色后，它将循环回红色，并在各种颜色中保持循环

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

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

这可能不起作用，因为文本在未单击按钮的情况下正在更改。有什么想法吗

这是一把小提琴

---

这对你有用

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;
    });
});

---

这对你有用

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;
    });
});

我更新了你的小提琴

使用if循环而不是while循环

编辑：您在颜色数组中两次提到红色。为了避免混淆，我把它改成了不同的东西。

我更新了你的小提琴

使用if循环而不是while循环

编辑：您在颜色数组中两次提到红色。为了避免混淆，我把它改成了不同的东西

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

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