1

矢印キーを押したときにボックスを動かそうとしています。このソリューションを見つけてコピーしようとしましたが、まだ機能しません (Sime Vidas によるトップの回答)。

私の Jquery ファイルは間違いなく同じフォルダーにあり、他のすべてはソリューションからコピーして貼り付けただけです (JSFiddle デモで動作します)。したがって、問題は HTML、CSS、または JavaScript ではないと思いますが、すべてをまとめる際にいくつかの間違いを犯しました。

ボックスが表示されますが、移動しません。なぜ機能しないのですか？

<!doctype html>
<html>
<head>
<style>
#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}  

#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}
</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
var pane = $('#pane'),
    box = $('#box'),
    maxValue = pane.width() - box.width(),
    keysPressed = {},
    distancePerIteration = 3;

function calculateNewValue(oldValue, keyCode1, keyCode2) {
    var newValue = parseInt(oldValue, 10)
                   - (keysPressed[keyCode1] ? distancePerIteration : 0)
                   + (keysPressed[keyCode2] ? distancePerIteration : 0);
       return newValue < 0 ? 0 : newValue > maxValue ? maxValue : newValue;
}

$(window).keydown(function(event) { keysPressed[event.which] = true; });
$(window).keyup(function(event) { keysPressed[event.which] = false; });

    setInterval(function() {
    box.css({
        left: function(index ,oldValue) {
            return calculateNewValue(oldValue, 37, 39);
        },
        top: function(index, oldValue) {
            return calculateNewValue(oldValue, 38, 40);
        }
    });
}, 20);

</script>

</head>

<body>

<div id="pane">
    <div id="box"></div>
</div>

</body>

</html>
4

1 に答える 1

2

要素が存在する前にコードが実行されています。

コードをdocument.ready内に配置します。

$(function(){

    // code goes here

});
于 2013-01-31T16:13:20.843 に答える