2012-08-09 4 views
0

lef 및 right 키를 사용하여 PHP로 페이지가 매겨진 목록을 가로 질러 가려고합니다. 오른쪽 키를 누른 후 Jquery는 숫자 2 인 하나의 숫자에 붙어있는 것처럼 보입니다. 무엇이 잘못되었는지 궁금합니다. 아래 : 대단히 감사합니다.jquery onkey left right 슬라이드가 제대로 작동하지 않습니까?

 $(document).ready(function(){ 
       function loading_show(){ 
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast'); 
       } 
       function loading_hide(){ 
        $('#loading').fadeOut('fast'); 
       }     
       function loadData(page){ 
        loading_show(); 
        $.ajax 
        ({ 
         type: "POST", 
         url: "load_data.php", 
         data: "page="+page, 
         success: function(msg) 
         { 
          $("#container").ajaxComplete(function(event, request, settings) 
          { 
           loading_hide(); 
           $("#container").html(msg); 
          }); 
         } 
        }); 
       } 
       loadData(1); // For first time page load default results 
       $('#container .pagination li.active').live('click',function(){ 
        var page = $(this).attr('p'); 
        loadData(page); 

       });   
       $('#go_btn').live('click',function(){ 
        var page = parseInt($('.goto').val()); 
        var no_of_pages = parseInt($('.total').attr('a')); 
        if(page != 0 && page <= no_of_pages){ 
         loadData(page); 
        }else{ 
         alert('Enter a PAGE between 1 and '+no_of_pages); 
         $('.goto').val("").focus(); 
         return false; 
        } 

       }); 

$(document).keydown(function(e){ 
    if (e.keyCode == 39) { 
     //do while(){ 

     var page = $('#container .pagination li.active').attr('p'); 
     var add= 1 
     var key = parseInt(page) + parseInt(add); 
     //document.write(key); 
        loadData(key); 
        var page = key 
     //} 

     return false; 
    } 
}); 
      }); 
+1

당신이 이동으로 설정되어 있는지 찾아야한다 다음으로 모든 li에서 활성 클래스를 제거하고 다음 li에 활성 클래스를 추가합니다. 또한 모든 li에서 활성 클래스를 제거하고 이전으로 이동하면 이전 클래스에 활성 클래스를 추가합니다. –

답변

1
$(function() { 
    $(document).on('keyup', function() { 
     var KEY_LEFT = 37; 
     var KEY_RIGHT = 39; 

     var currentPage = $('#container .pagination li.active'); 

     switch (e.keyCode) { 
      case KEY_LEFT: 
       var page = currentPage.removeClass('active') 
             .prev() 
             .addClass('active') 
             .attr('data-page'); 

       loadData(page); 
       break; 

      case KEY_RIGHT: 
       var page = currentPage.removeClass('active') 
             .next() 
             .addClass('active') 
             .attr('data-page'); 

       loadData(page); 
       break; 
     } 
    }); 
}); 

HTML : 여기

<ul class="pagination"> 
    <li data-page="3">3</li> 
    <li data-page="4">4</li> 
    <li class="active" data-page="5">5</li> 
    <li data-page="6">6</li> 
    <li data-page="7">7</li> 
</ul> 
1

첫째, 당신이 놓치고있는 세미콜론 : var add= 1 여기 : var page = key. 둘째, 전체 HTML 코드가 없으면 여기에 아무도 정확하게 정확한 문제를 식별 할 수 없습니다. 이 문제는 AJAX 응답과 관련되어 있으며 귀하의 질문에 대한 답을보기위한 예시 답변이 없습니다.

두 번째 페이지에서 멈추는 경우 li.active 요소의 p 속성이 증가하지 않습니다. 모든 페이지로드시 1로 설정됩니다. HTML을 제공하는 책임이있는 서버 측 프로세스가 예상 한 HTML을 반환하지 않습니다. 당신의 .ajaxComplete 방법 내부

: 다음 HTML의 내용을 확인하기 위해 console.log 또는 경고를 사용해보십시오

alert(msg); 

당신은 p 속성이 항상 1

관련 문제