Question

我已经尝试在检测到按键事件时更改元素的边距，但是我遇到了一些问题，因为它当前没有执行代码。我按下左箭头时试图减小边距，按下右箭头时增加边距。

以下是代码：

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                background: #f00;
            }
            hr{
                width: 1px;
                height: 600px;
            }
            .player{
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 600px 550px 0px;
            }
        </style>
        <script>
            var player = document.getElementById('player')
            var num = 550
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow
                    case 37: num++;
                             document.getElementById('player').style.margin = '600px ' + num + 'px' + ' 0px';
                             break;
                    // Right Arrow
                    case 39: num--;
                             document.getElementById('player').style.margin = '600px ' + num + 'px 0px';
                             break;
                }
            });
        </script>
    </head>
    <body>
        <div class="player">
            Player
        </div>
    </body>
</html>

我的问题是如何修复代码使其正常工作，当我点击向左箭头时，他向左移动并与另一个相同？

感谢。

编辑：

我已经得到了答案，现在我唯一的问题是如何让它更快地移动？

Answer 1

更改

<div class="player">
    Player
</div>

到

<div id="player">
    Player
</div>

它不起作用的原因是因为你在元素有一个类时调用document.getElementById(id)。

更改keydown元素的边距

1 个答案: