如何遍历一组颜色以更改键上的背景（按下/按下）
Posted
技术标签:
【中文标题】如何遍历一组颜色以更改键上的背景（按下/按下）【英文标题】：How to loop over an array of colors to change background on key(press/down) 【发布时间】：2016-08-02 12:22:12 【问题描述】：互联网。如果这与其他人不太相关，请原谅我，但我会留在这里，以防这是一个有效的问题。
我正在尝试创建一个 textarea 字段，用户每次在该字段中按下一个键 (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
【问题讨论】：
你们都有非常有效的答案！我只是带着第一反应去了。感谢您向我展示了各种微妙的编码方式。 【参考方案1】：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
);
)
【讨论】：
【参考方案2】：尝试使用全局变量并在每次按键时递增
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
【讨论】：
【参考方案3】：不要使用 for 循环。每次用户按下一个键时，您只需向上计数 x 。然后它将起作用。 如果到达数组末尾，请不要忘记将 x 重置为 0
【讨论】：
感谢您的提醒！当按键被按下时，我还有一些其他代码被触发，这个逻辑肯定会有所帮助。【参考方案4】：您在单次按键中循环并设置所有颜色。浏览器可能正在对其进行优化以显示最终背景，或者它切换得太快以至于您看不到它。
您应该将当前背景的索引存储在某处，然后切换到下一个而不是循环：
$(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++;
);
);
【讨论】：
嗯，我完全认为 for 循环是必要的，因为仍然有一个变量（索引）不应该超过数组中的项目数（索引以上是关于如何遍历一组颜色以更改键上的背景（按下/按下）的主要内容，如果未能解决你的问题，请参考以下文章