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

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

我正在尝试创建一个textarea字段，其中每次和每当用户按下一个键（az）时，它将触发背景颜色更改（在数组中列出）。 我一直用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++; }); }); 

Answer 2

不要使用for循环。 每次用户按键时，您只需要向上计数x。 然后它会工作。 如果到达arrays末尾，请不要忘记将x重置为0

Answer 3

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

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

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