Question

我试图按箭头键改变背景颜色。我使用数组来存储颜色。似乎我有几个错误，但无法找到它们。

$(document).ready(function () 
{
    var array = ["#3D567C", "#013C8A", "#67A0D7", "FBFCFC", "#D9DFE1"]
    var counter = 0;
    var forward = 0;
    var backward = 0;
    var nextColor;
    var previousColor;

    forward = (counter + 1) % array.length;
    backward = (counter - 1)% array.length;

    nextColor = array[forward];
    previousColor = array[backward];

    switch(event.which) 
    {
         case 37: // arrow left
              $(".box").css("background-color", previousColor)
              console.log("ewjf")
              break;
        case 39: // arrow right
             $(".box").css("background-color", nextColor)
             break;
       default: return; // exit this handler for other keys
    }

    e.preventDefault(); // prevent the default action (scroll / move caret)
});

Answer 1

如果计数器被称为0向后将有-1％5 = -1数组[-1]将导致未定义

forward = (counter + 1) % array.length;
backward = (counter - 1)% array.length;

在$（document）.ready（fn）中，您无法处理keydown处理。

您需要定义keydown事件

$(document).bind("keydown",function(){
// here you need to check the key and set back color.
})

Answer 2

如你所说，有几个问题。

请检查以下代码

 $(document).ready(function () {

    var array = ["#3D567C", "#013C8A", "#67A0D7", "FBFCFC", "#D9DFE1"]
    var counter = 0;


    $(document).keyup(function (event)
                      {
  event.preventDefault(); // prevent the default action (scroll / move caret)
  switch(event.which) {
        case 37: // arrow left
          counter--;
          if(counter ==-1)
          {
              counter=array.length-1;
          }
        $(".box").css("background-color", array[counter])

        break;

        case 39: // arrow right
           counter++;
          if(counter == array.length)
          {
              counter=0;
          }
        $(".box").css("background-color", array[counter])

        break;

        default: return; // exit this handler for other keys
    }
                      });

});

删除了不需要的变量。添加了keyup事件来改变颜色。

我还添加了循环来连续改变颜色。

demo

使用箭头键更改背景颜色

2 个答案: