Question

我正在尝试用jQuery学习一些编程。我有一个800 x 800像素尺寸的div。我有另一个16 x 16像素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')
    }
});

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

Answer 1

你的问题是：

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

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

尝试：

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

Answer 2

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



    });


});

div的jquery碰撞检测

2 个答案: