2012-01-12 4 views
1

jQuery로 프로그래밍을 배우려고합니다. 800 x 800 픽셀 크기의 div가 있습니다. 화살표 키를 사용하여 더 큰 화면 내에서 움직이기를 원하는 또 다른 16 x 16 픽셀 div가 있습니다. 문제는 제대로 작동하지 못합니다. 누군가 내가 잘못하고있는 것을 말해 줄 수 있습니까? "왼쪽"CSS 속성이 0 픽셀 미만인 경우 왼쪽 작품을 이동div에 대한 jquery 충돌 감지

이는 16 × 16 DIV 중지 :

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

이 작동하지 않는 바로 이동, 그것은 왼쪽에 상관없이으로부터 80 픽셀에서 16 × 16 DIV 중지 내가 시도한 80px 이상의 값 :

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

마찬가지로 위와 아래로 이동하는 방법은 작동하지 않지만 잘못 이동하는 것은 아닙니다. 모든 방향으로 움직이는 것은 && 인수 없이는 잘 작동합니다.

+0

처럼 뭔가에 코드를 조금 정리할 것 jermel에서 답을 촬영 : HTTP : // 유래 .com/questions/8628368/how-do-i-implement-of-div 요소 간 충돌 감지 –

답변

0

이 중복 될 수뿐만 아니라 내가이

$(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); 
     } 



    }); 


}); 
+0

고마워. 이것을 위해서! 내가 숫자를 가지고 노는 것을 몰랐다. 이제 내 코드는 매력처럼 작동합니다. – fnx

2

귀하의 문제는 : 당신은 숫자 대신 문자열을 비교하는

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

;

시도 :

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

Becuase 나는 지루하다. http://jsfiddle.net/4hB9k/40/ –