[英]jquery onkey left right slide not working properly?
我正在尝试使用lef和right键水平遍历带有php的分页列表。按下右键后,Jquery似乎卡在一个数字2上。我想知道我在下面做错了什么:非常感谢你。
$(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;
}
});
});
$(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>
首先,你在这里遗漏了分号: var add= 1
,这里: var page = key
。 其次,没有完整的HTML代码,这里没有人可以肯定地确定准确的问题。 此问题涉及AJAX响应,我们在您的问题中没有回复示例的示例。
无论如何,如果你被卡在第二页上,那么你的li.active
元素的p
属性不会递增 - 每次加载页面时都会设置为1。 负责提供HTML的服务器端进程不会返回您期望的HTML。 尝试使用console.log
或警报来验证HTML的内容:
在.ajaxComplete
方法中:
alert(msg);
您应该发现p
属性始终设置为1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.