0

キー プレス イベントが検出されたときに要素のマージンを変更しようとしましたが、コードが正しく実行されないため、少し問題があります。左矢印が押されたときにマージンを減らし、右矢印が押されたときにマージンを増やしようとしています。

コードは次のとおりです。

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

私の質問は、コードを修正して機能させるにはどうすればよいかということです。左矢印をクリックすると、左に移動し、他の矢印と同じになりますか?

ありがとう。

編集：

答えが出ました。私の唯一の質問は、どうすればそれをより速く動かすことができるかということです。

4

1 に答える 1

1

変化する

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

に

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

機能しない理由はdocument.getElementById(id)、要素にクラスがあるときに呼び出しているためです。

于 2013-06-16T21:16:22.173 に答える