如何循环遍历颜色数组以更改按键背景（按下/向下）

互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。

我正在尝试创建一个文本区域字段，其中用户每次按下键（a-z），都会触发背景颜色更改（在数组中列出）。我一直在用 JQuery 做这件事，我想我已经很接近了（？），但每次我运行代码并按下一个键时，数组中的最后一项是唯一出现的颜色。我想在 for 循环中使用条件语句，但我不知道该把它放在哪里——如果有必要的话。我究竟做错了什么？另外，我应该设置“x = color[0]”吗？

$(document).ready(function() {
    var colors = ["#FFF0CB", "#FFECD1", "#FFE9DA", "#FFE7E4"];
    $("textarea").keydown(function() {
        for (x = 0; x < colors.length; x++;) {
            $("textarea").css("background-color", colors[x]);
        };
    });
});

JSFiddle //jsfiddle.net/filmonmerid/6ztmdbja/3/

您只需按一下按键即可循环并设置所有颜色。浏览器可能正在对其进行优化以显示最终背景，或者可能它切换得太快以至于您看不到它。

您应该将当前背景的索引存储在某处，然后切换到下一个而不是循环：

$(document).ready(function() {
  var colors = ["#FFF0CB", "#FFECD1", "#FFE9DA", "#FFE7E4"];
  var index = 0;
  $("textarea").keydown(function() {
    if (index >= colors.length)
      index = 0; // reset back to first color
    $("textarea").css("background-color", colors[index]);
    index++;
  });
});