обнаружение столкновений jquery для div - PullRequest
Новая
       8

обнаружение столкновений jquery для div

1 голос
/ 12 января 2012

Я пытаюсь научиться программированию с помощью jQuery. У меня есть div, который имеет размеры 800 х 800 пикселей. У меня есть еще один div 16 x 16 пикселей, который я хочу перемещать внутри большего с помощью клавиш со стрелками. Проблема в том, что я не могу заставить его работать должным образом, может кто-нибудь сказать мне, что я делаю неправильно.

Перемещение влево работает, оно останавливает деление 16x16, если атрибут css "left" меньше 0px: 

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

Движение вправо не работает, оно останавливает деление 16x16 на 80px слева, независимо от того, какое значение выше 80px, я пытаюсь: 

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

Также перемещение вверх и вниз аналогичным способом не работает, движение ограничено неправильно. Движение во всех направлениях работает нормально без && аргументов.

Ответы [ 2 ]

2 голосов
/ 12 января 2012

Ваша проблема: 

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

Вы сравниваете строки вместо чисел;

Попробуйте: 

var left = parseInt($('#p1').css('left'),10);
if (e.which == '39' && (left < 800)) {...
0 голосов
/ 12 января 2012

Также, принимая ответ от 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);
        }



    });


});
...