jquery - 如何循环遍历颜色数组以更改按键背景(按下/向下)

Question

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

我正在尝试创建一个文本区域字段，其中用户每次按下键(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

Answer 1

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

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

$(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++;
  });
});