Javascript 用于div的jquery冲突检测

我正在尝试学习使用jQuery编程。我有一个800 x 800像素的div。我还有一个16 x 16像素的div，我想用箭头键在较大的div中移动。问题是我不能让它正常工作，有人能告诉我我做错了什么吗

向左移动有效，如果css属性“left”在0px以下，它将停止16x16 div：

$(this).keydown(function(e) {  
    if (e.which == '37' && ($('#p1').css('left') > "0px")) {
        $('#p1').css('left', '-=16px')
    }
});

向右移动不起作用，它会将16x16 div从左侧停止在80px处，无论我尝试的值高于80px：

$(this).keydown(function(e) {  
    if (e.which == '39' && ($('#p1').css('left') < '800px')) {
        $('#p1').css('left', '+=16px')
    }
});

$（this）.keydown（函数（e）{
如果（e.which=='39'&（$（'p1'）.css（'left'）<'800px'））{
$（'#p1'）.css（'left'，'+=16px'））
}
});

同样，使用类似的方法上下移动也不起作用，移动受到错误的限制。在没有参数的情况下，向所有方向移动都可以正常工作。

您的问题是：

css('left') < '800px')

css（'left'）<'800px'）

您正在比较字符串而不是数字

尝试：

var left=parseInt（$（'p1'）.css（'left'），10）；
如果（e.which='39'&（左<800））{。。。

同样从jermel那里得到答案，我也会把代码整理成这样

$(document).ready(function() {

    $(document).keydown(function(e){
        var left = parseInt($('#p1').css('left'),10);

        if (e.keyCode === 37  && (left > 0)) {
            $('#p1').css('left', left-16);
        }



        if (e.keyCode === 39 && (left < 800)) {
            $('#p1').css('left',left+16);
        }



    });


});

$（文档）.ready（函数（）{
$（文档）.keydown（函数（e）{
var left=parseInt（$（'#p1'）.css（'left'），10）；
如果（e.keyCode==37&&（左>0））{
$（'p1'）.css（'left'，left-16）；
}
如果（例如keyCode===39&&（左<800））{
$（'p1'）.css（'left'，left+16）；
}
});
});

谢谢！我不知道我不是在玩数字。现在我的代码就像一个符咒。这可能是重复的：

$(document).ready(function() {

    $(document).keydown(function(e){
        var left = parseInt($('#p1').css('left'),10);

        if (e.keyCode === 37  && (left > 0)) {
            $('#p1').css('left', left-16);
        }



        if (e.keyCode === 39 && (left < 800)) {
            $('#p1').css('left',left+16);
        }



    });


});