jQuery 使用jQuery 使用Next Previous 按钮显示隐藏div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17064433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show hide divs using Next Previous button using jQuery?
提问by Jay
for e.g i have 10 <div>, i want to show each <div>on next button click & show previous <div>on previous button click.
how to do it using jQuery?
例如，我有 10 个<div>，我想<div>在单击下一个按钮时显示每个，并在单击上一个按钮时显示<div>上一个。如何使用 jQuery 做到这一点？
回答by Louis XIV
<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>
This is a very simple HTML example.
这是一个非常简单的 HTML 示例。
With a simple jQuery code like this one:
使用这样一个简单的 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;
});
});
For further explanations: The first block will hide every div except first one (e is a counter in each function of jQuery).
进一步解释：第一个块将隐藏除第一个之外的每个 div（e 是 jQuery 的每个函数中的一个计数器）。
The two other blocks handle the click on the buttons. We are looking for the visible div and on click we are display next (see next() function of jquery or previous div (prev() function of jquery).
另外两个块处理按钮上的点击。我们正在寻找可见的 div，点击后我们将显示下一个（请参阅 jquery 的 next() 函数或上一个 div（jquery 的 prev() 函数）。
If there is no next div (on next button click) we are hiding the visible div and displaying the first one.
如果没有下一个 div（在下一个按钮单击时），我们将隐藏可见的 div 并显示第一个。
Online example here: http://jsfiddle.net/hsJbu/
在线示例：http: //jsfiddle.net/hsJbu/
回答by Stano
You can do it like this:
你可以这样做：
HTML:
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:
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
});
});
回答by Matthias Wegtun
It sounds like a carousel what you want
听起来像你想要的旋转木马
Here are some examples: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
以下是一些示例：http: //www.tripwiremagazine.com/2012/12/jquery-carousel.html
You can have a next and previous button to slide in a div and the old one slides out (or any other effect)
您可以使用下一个和上一个按钮在 div 中滑入，旧的滑出（或任何其他效果）
The carousels are not dependent on images it can be Divs filled with content.
轮播不依赖于图像，它可以是充满内容的 Div。
Good luck & Have a nice day
祝你好运&有美好的一天
edit: Bootstraps own carousel: http://twitter.github.io/bootstrap/javascript.html#carousel
编辑：引导自己的轮播：http: //twitter.github.io/bootstrap/javascript.html#carousel
回答by Nitin Agrawal
try something below if u want do it by your own. Set all divs to display:none initially except first. also in below code change maxdiv value based on number of divs you have (or find it in jquery itself if the number can change).
如果您想自己做，请尝试以下操作。将所有 div 设置为 display:none 最初除了 first 。同样在下面的代码中，根据您拥有的 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");
});
});
