jQuery简单分页

jQuery simple pagination

本文关键字：分页 简单 jQuery      更新时间：2023-09-26

我有几个ul，我想一次只显示1，并使用上一个和下一个按钮来循环它们。

我在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"item1"设置为在页面加载时显示块。

然后，当单击next/prev按钮时，将当前ul设置为不显示，并将next/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设置为不显示，但前提是没有任何内容告诉它将下一个/上一个ul设置为显示块。

请查看它是否对您有帮助。这是您的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;
}

这是小提琴

我认为应该使用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/

或者您可以使用我的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

相关文章：