div的jquery碰撞检测

我正在尝试用jQuery学习一些编程。 我有一个800 x 800像素尺寸的div。 我有另一个16 x 16像素div，我想使用箭头键在较大的一个内移动。 问题是我无法让它正常工作，有人可以告诉我我做错了什么。

向左移动，如果css属性“left”低于0px，它将停止16×16 div：

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

向右移动不起作用，它会从左侧停止16×16 div到80px，无论80px以上的值是多少，我都尝试：

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

使用类似方法上下移动也不起作用，移动被错误地限制。 没有&&参数，向所有方向移动都可以正常工作。

Answer 1

从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); } }); }); 

Answer 2

你的问题是：

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

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

尝试：

 var left = parseInt($('#p1').css('left'),10); if (e.which == '39' && (left < 800)) {...