jQuery 简单分页

Question

我有几个 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'显示none，然后设置id'item1'在页面加载时显示块。

然后在单击 next/prev 按钮时将当前 ul 设置为显示 none 并将 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 设置为显示 none，但前提是没有任何指示将 next/previous ul 设置为显示块。

Answer 1

看看对你有没有帮助。这是你的 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

Answer 2

我认为您应该使用 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();
    });
});

如果您想尝试，这里有一个有效的 fiddle：http://jsfiddle.net/jj5q441o/4/

Answer 3

或者你可以使用我的 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}
        }
    );
}
});

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

jQuery 简单分页

jQuery simple pagination

javascript

foreach

jquery

pagination