2012-08-09 54 views
0

我想用左键和右键水平浏览一个分页列表php.After按下正确的键后,Jquery似乎被卡在一个单一的数字是2号。我想知道我在做什么错误下面:非常感谢。jquery onkey左右滑动不能正常工作?

 $(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中删除活动类,并且如果转到上一个,则将活动类添加到前一个。 – 2012-08-09 05:57:46

回答

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。尝试使用console.log或警报,以验证HTML的内容:

里面你.ajaxComplete方法:

alert(msg); 

你应该发现,p属性总是设置为1