不能使用 jQuery 键码来更改元素的 CSS

Question

我正在学习使用 html、css 和 jquery 让角色在屏幕上移动的教程。我不确定为什么箭头键不能让角色移动。当我按向左、向上、向右或向下键时，唯一发生的事情是左侧和底部的滚动条移动。怎么了？？

$(function() {
  var player = '<div id="player"></div>';
  $("#map").append(player);


  $(document).keydown(function(e) {
    //alert(e.keyCode);

    var position = $("#player").position();


    switch (e.keycode) {
      case 37: //left
        $("#player").css('left', position.left - 20 + 'px');
        break;

      case 38: //up
        $("#player").css('top', position.top - 20 + 'px');
        break;

      case 39: //right
        $("#player").css('left', position.left + 20 + 'px');
        break;

      case 40: //down
        $("#player").css('top', position.top + +'px');
        break;

    }
  });

});

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0") no-repeat;
  width: 165px;
  height: 175px;
}
#map {
  position: relative;
  border: 1px solid black;
  height: 600px;
  width: 800px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="maze.css" />
</head>

<body>
  <h1>Maze</h1>


  <div id="map"></div>
  <div id="output"></div>


</body>

</html>

Answer 1

Javascript区分大小写。

//e.keycode is wrong
switch (e.keycode) {
    //blah
}

//e.keyCode is correct
switch (e.keyCode) {
    //blah
}

而且也有缺少操作数的错误，

// Wrong
$("#player").css('top', position.top + +'px');
// Correct
$("#player").css('top', position.top + 20 +'px');

Fiddle

Answer 2

此外，

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) no-repeat;
  width: 165px;
  height: 175px;
}

应该是

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) ;
  background-repeat:no-repeat; 
  width: 165px;
  height: 175px;
}

Answer 3

您应该使用 e.keyCode 而不是 e.keycode。

不能使用 jQuery 键码来更改元素的 CSS

Can not use jQuery keycode to change element's CSS

html

javascript

css

jquery

css-position