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来设置所有＆＃39; itemWrap＆＃39;显示无，然后设置id＆＃39; item1＆＃39;在页面加载时显示块。

然后单击下一个/上一个按钮时，将当前ul设置为none，并将下一个/上一个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，但前提是没有任何东西告诉它将下一个/前一个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();
    });
});

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

Answer 3

或者您可以使用我的jquery插件。

ObservableList data

以下是链接：https://github.com/WadimMakarenko/jquery-simple_ajax

jQuery简单的分页

3 个答案: