Jquery -逐个显示div
Jquery -逐个显示div
提问于 2013-03-06 10:41:49
当用户单击previous和next标签时，我需要一个接一个地显示许多div(以二进制方式创建)。
我试过的是：
HTML：
<div style="display: none;" id="panel_steps_page1" class="pages page1"> </div>
<div style="display: none;" id="panel_steps_page2" class="pages page2"> </div>
<div style="display: none;" id="panel_steps_page3" class="pages page3"> </div>
<div style="display: none;" id="panel_steps_page4" class="pages page4"> </div>
<span id="btn_previous" class="previous">previous</span>
<span id="Span1" class="next">next</span>Jquery：
$(".page1").show();
$(".next").click(function(e) {
$(".pages").each(function(index) {
if ($(".page" + index).is(":visible")) {
$(".page" + index).hide();
$(".page" + (index + 1)).show();
}
});
});
$(".previous").click(function(e) {
$(".pages").each(function(index) {
if ($(".page" + index).is(":visible")) {
$(".page" + index).hide();
$(".page" + (index - 1)).show();
}
});
});但这不起作用。
活琴
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-03-06 10:47:28
密码太复杂了。这里有一个简单得多的版本，它读起来几乎和它的工作原理相同：
$(".next").click(function() {
$(".pages:visible").hide().next().show();
});
$(".previous").click(function() {
$(".pages:visible").hide().prev().show();
});以上是一个很好的起点，但是如果你试图跳出界限，它可能会隐藏所有的div。这个问题可以通过一个小的调整来解决：
$(".next").click(function() {
$(".pages:visible").hide().next(".pages").addBack().last().show();
});
$(".previous").click(function() {
$(".pages:visible").hide().prev(".pages").addBack().first().show();
});看到它的行动。
更新:基于下面的评论，编辑了代码(但不是小提琴)，将.andSelf()替换为.addBack()。
Stack Overflow用户
发布于 2013-03-06 10:51:26
此片段将防止您隐藏最后一页或第一页。它可以防止没有显示页面的场景。
$(document).ready(function(){
$(".page1").show();
$(".next").click(function(e) {
var next = $(".pages:visible").next(".pages");
if(next.length >0){
$(".pages:visible").hide();
next.show();
}
});
$(".previous").click(function(e) {
var prev = $(".pages:visible").prev(".pages");
if(prev.length > 0){
$(".pages:visible").hide();
prev.show();
}
});
});工作示例：http://jsfiddle.net/envDx/1/
Stack Overflow用户
发布于 2013-03-06 10:53:45
$(".next, .previous").click(function(e) {
var $p = $('.pages:visible'),
m = this.className == 'next' ? 'next' : 'prev';
if ($p[m]('.pages').length) $p.hide()[m]().show();
});http://jsfiddle.net/xMaZQ/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15245077
复制相关文章
相似问题
腾讯云开发者
