jquery - 使用 jQuery 使用 Next Previous 按钮显示隐藏 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;
    });
});

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

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

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

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

Answer 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

Answer 3

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

以下是一些示例：http ://www.tripwiremagazine.com/2012/12/jquery-carousel.html

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

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

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

Answer 4

如果你想自己做，试试下面的东西。最初将所有 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");
 });
 });