Question

当我按下箭头键时，我正试图让一个盒子移动。我找到了this解决方案并尝试将其复制，但它仍然无效（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>

Answer 1

您的代码在元素存在之前运行。

将代码放在document.ready：

中

$(function(){

    // code goes here

});

无法在JavaScript中移动此框

1 个答案: