jquery - 使用 jQuery 使用“下一个上一个”按钮显示隐藏 div？

Question

例如，我有 10 <div> ，我想显示每个 <div>在下一个按钮上单击并显示上一个 <div>单击上一个按钮时。如何使用 jQuery 做到这一点？

Answer 1

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

这是一个非常简单的 HTML 示例。

使用像这样的简单 jQuery 代码:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

欲了解更多说明:第一个 block 将隐藏除第一个之外的所有 div(e 是 jQuery 每个函数中的计数器)。

另外两个 block 处理按钮上的点击。我们正在寻找可见的 div，点击后我们将显示下一个(参见 jquery 的 next() 函数或上一个 div(jquery 的 prev() 函数)。

如果没有下一个 div(单击下一个按钮时)，我们将隐藏可见的 div 并显示第一个。

在线示例:http://jsfiddle.net/hsJbu/