jQuery简单分页

我有几个ul，我只想每次只显示1个上一个和下一个按钮来遍历它们。jQuery简单分页

我正在使用PHP的foreach生成每个ul最多6个li。以及为每个（itemX）获取唯一的ID。

<ul class="itemWrap" id="itemX"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    // ETC 
</ul>

我想使用jQuery来设置所有“itemWrap”显示无，然后设置ID“项目1”，以显示在页面加载块。

然后，当点击next/prev按钮时，将当前ul设置为显示none，并将下一个/ prev ul设置为显示块。

jQuery(document).ready(function(){ 
jQuery(".itemWrap").css("display", "none"); 
jQuery("#item1").css("display", "block"); 

var count = 1; 
var item = jQuery("#item" + count); 

jQuery(".prev").click(function(){ 
    // do previous tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count--; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
}); 

jQuery(".next").click(function(){ 
    // do next tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count++; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
});});

这是我有什么，它的工作原理，设置当前上行显示无，但前提是什么，告诉它来设置一个/上一个UL显示块。

来源

2015-04-06 Edward144

改变'count'不会改变'item'是什么。每次更改'count'时使用新的选择器 – charlietfl

请看看它是否对你有帮助。这里是你的JavaScript

$(document).ready(function(){ 

$("#item1").addClass("active"); 

$(".prev").click(function(){ 
    // do previous tab 
    var $el = $(".active").prev(".itemWrap"); 
    if($el.length){ 
     $(".itemWrap").each(function() { 
      $(this).removeClass("active"); 
     }); 
     $el.addClass("active"); 
    } 

}); 

$(".next").click(function(){ 
    // do next tab 
    var $el = $(".active").next(".itemWrap"); 
    if($el.length){ 
    $(".itemWrap").each(function() { 
     $(this).removeClass("active"); 
    }); 
    $el.addClass("active"); 
    } 
}); 

});

，这里是你的CSS

.itemWrap 
{ 
display:none; 
} 
.itemWrap.active 
{ 
display:block; 
}

这里是fiddle

来源

2015-04-06 15:56:06 Ashokbharathi

这很好，谢谢。 – Edward144

我认为你应该使用DOM的状态，而不是JS变量来确定要隐藏或显示下一个。这样你就可以避免全局变量，并使用DOM的状态来确定行为。下面是一些简单的代码（它需要的边界检查和一些改进，但它应该让你开始）：

$(document).ready(function(){ 
    $(".itemWrap").hide(); 
    $("#item1").show(); 
    $("#prev").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.prev(".itemWrap").show(); 
    }); 

    $("#next").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.next(".itemWrap").show(); 
    }); 
});

这里的工作小提琴，如果你想尝试一下：http://jsfiddle.net/jj5q441o/4/

来源

2015-04-06 15:58:27 wholevinski

或者你可以使用我的jQuery插件。

$(document).ready(function{ 
function loadPaging_content(offset_data){ 
    var offset;//default value page button 
    if(offset_data){ 
     offset = offset_data; 
    }else{ 
     offset = 0; 
    } 
    var items = 10;//example 
    $('your LoadPage selector(In this div load Page)').xhrPagination({ 
     sel: 'selector',//In this div created paging Links 
     totalCount: 'selector OR Number', 
     items: items 
     }, 
     { 
      url:'//your URL', 
      dataLP:{offset: offset, items:items} 
     } 
    ); 
} 
});

这里是链接：https://github.com/WadimMakarenko/jquery-simple_ajax

来源

2016-12-24 23:41:49

jQuery简单分页

回答

相关问题