使用 jQuery 使用 Next Previous 按钮显示隐藏 div？答案

【问题标题】：show hide divs using Next Previous button using jQuery?使用 jQuery 使用 Next Previous 按钮显示隐藏 div？
【发布时间】：2013-06-12 11:34:28
【问题描述】：

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

【问题讨论】：

你试过自己做吗？
你有专门的 html 标记吗？
@Jai ，我的 html 例如：<div class="cls1"></div><div class="cls2"></div><div class="cls3"></div><div class="cls4"></div><div class="cls5"></div><div class="cls6"></div><div class="cls7"></div> 等等.....每次下一次点击每个下一个 div 应该显示 & 在每次上一次点击 div 应该显示。
@pXL 我是 jQuery 新手 :(

标签： jquery

【解决方案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;
    });
});

更多解释：第一个块将隐藏除第一个之外的每个 div（e 是 jQuery 的每个函数中的一个计数器）。

另外两个块处理按钮的点击。我们正在寻找可见的 div 并在单击时显示下一个（参见 jquery 的 next() 函数或上一个 div（jquery 的 prev() 函数）。

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

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

【讨论】：

【解决方案2】：

你可以这样做：

HTML：

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

JS：

$(document).ready(function() {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show(); // hide all divs except first
    $("button[name=next]").click(function() {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function() {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
});

jsfiddle

【讨论】：

【解决方案3】：

如果您想自己动手，请尝试以下方法。最初将所有 div 设置为 display:none，除了第一个。同样在下面的代码中，根据您拥有的 div 数量更改 maxdiv 值（如果数字可以更改，则在 jquery 本身中找到它）。

$(document).ready(function(){
var tracker = 1;
var maxdivs = 4;

$("#next").click(function(){
var divclass = ".cls" + tracker;
$(divclass).css("display","none");
tracker = tracker + 1;
if(tracker > maxdivs)
  tracker = 1;
divclass = ".cls" + tracker;
$(divclass).css("display","block");
});

$("#prev").click(function(){
 var divclass = ".cls" + tracker;
  $(divclass).css("display","none");
    tracker = tracker - 1;
  if(tracker < 1)
    tracker = maxdivs;
  divclass = ".cls" + tracker;
  $(divclass).css("display","block");
 });
 });

【讨论】：

【解决方案4】：

听起来像你想要的旋转木马

这里有一些例子：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

你可以有一个下一个和上一个按钮来滑入一个 div 和旧的滑出（或任何其他效果）

轮播不依赖于图像，它可以是Divs填充的内容。

编辑：引导自己的轮播：http://twitter.github.io/bootstrap/javascript.html#carousel

【讨论】：