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。文字为purple后，它将循环回red并继续循环使用各种颜色。

我有一个疯狂，古怪的想法，如下所示。

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

这可能不起作用，因为文本在不单击按钮的情况下发生变化。有什么想法吗？

这是一个小提琴

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

Answer 2

我更新了你的小提琴

http://jsfiddle.net/c7ea2m6f/4/

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

使用if循环代替while循环。

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

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

2 个答案: