javascript - div 的 jquery 碰撞检测

Question

我正在尝试使用 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')
    }
});

向右移动不起作用，它会在距左侧 80px 处停止 16x16 div，无论我尝试超过 80px 的值是什么:

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

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

Answer 1

你的问题是:

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

你比较的是字符串而不是数字；

尝试:

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