如何遍历一组颜色以更改键的背景（press/down）

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

尝试使用全局变量并在每次按键时递增它

  var colors = ["#FFF0CB", "#FFECD1", "#FFE9DA", "#FFE7E4"];
            var index = 0;
            $("textarea").keydown(function() {
                    $("textarea").css("background-color", colors[index]);
                    index = index >= colors.length?0:index+1;//if end of array reset variable to 0

            });

     var colors = ["#FFF0CB", "#FFECD1", "#FFE9DA", "#FFE7E4"];
        var index = 0;
        $("textarea").keydown(function() {
                $("textarea").css("background-color", colors[index]);
                index = index >= colors.length?0:index+1;//if end of array reset variable to 0
                
        });

textarea{
  outline:none;
  border:none;
  resize: none;
  width: 400px;
  height:400px;
  padding: 10px;
  font-size:2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <textarea placeholder="Pssst! Type your message here!"></textarea>
</body>

demo

Answer 2

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

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

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

Answer 3

不要使用 for 循环。每次用户按下一个键时，您只需对 x 进行计数。然后它会起作用。如果到达数组末尾，请不要忘记将 x 重置为 0

Answer 4

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

如何遍历一组颜色以更改键的背景（press/down）

How to loop over an array of colors to change background on key(press/down)

arrays

jquery

for-loop

background-color