Question

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

我正在尝试创建一个textarea字段，其中每次和每当用户按下一个键（a-z）时，它将触发背景颜色更改（在数组中列出）。我一直用JQuery做这个，我想我关闭（？）但每次运行我的代码并按一个键时，数组中的最后一项是唯一出现的颜色。我想在for循环中使用条件，但我不知道在哪里放它 - 如果它甚至是必要的。我究竟做错了什么？另外，我应该设置＆＃34; x = color [0]＆＃34;代替？

$(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

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

  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

            });

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

demo

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

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

4 个答案: