无法使用 jQuery 键码更改元素的 CSS答案

【问题标题】：Can not use jQuery keycode to change element's CSS无法使用 jQuery 键码更改元素的 CSS
【发布时间】：2016-05-01 04:54:48
【问题描述】：

我正在学习使用 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>

【问题讨论】：

这一行：$("#player").css('top', position.top + +'px');

标签： javascript jquery html css css-position

【解决方案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

【讨论】：

另外，没有理由使用position.top + 20 + 'px'；你可以使用.css('top': '+=20px');。见第二个答案：stackoverflow.com/questions/4359184/…
问题：我把“alert(position.top)”放在switch语句之后。每当我移动角色时，它应该告诉我角色的位置。但是，它会在我按下箭头键之前告诉我字符的顶部位置。你知道我应该怎么做吗？ @AMACB
将alert(...); 移到switch 语句之后。

【解决方案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;
}

【讨论】：

【解决方案3】：

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

【讨论】：