0

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>

查询：

$(".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();
        }
    });
});

但它不起作用。

现场jsfiddle

4

5 回答 5

5

代码过于复杂。这是一个更简单的版本，几乎和它的工作方式一样大声朗读：

$(".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();
});

看到它在行动。

更新：根据下面的 insertusernamehere 评论，编辑了代码（但不是小提琴）以替换.andSelf()为。.addBack()

于 2013-03-06T10:47:28.500 回答
2

此代码段将阻止您隐藏最后一页或第一页。它可以防止没有页面显示的情况。

$(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/

于 2013-03-06T10:51:26.277 回答
2 
$(".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/

于 2013-03-06T10:53:45.067 回答
2

我使用了另一种更优化的解决方案，因为我避免了每次迭代。

$(".next").click(function(e) {
    var shown = $(".pages.visible").hide().removeClass('visible');
    var index = (shown.index() + 1) % 4;

    $(".page"+index).show().addClass('visible');
});

$(".previous").click(function(e) {
    var shown = $(".pages.visible").hide().removeClass('visible');
    var index = shown.index();
    index = (index == 0)? 3: index - 1;

    $(".page"+index).show().addClass('visible');
});

在这里尝试我的解决方案，让我知道它是否适合您

于 2013-03-06T11:02:58.700 回答
1

有你更新的Fiddler。

$(".next").click(function(e) {
    var $visibleOne = $(".pages:visible");
    var $nextToBeVisible = $visibleOne.next('div.pages');

    if($nextToBeVisible.length > 0) {
        $visibleOne.hide();
        $nextToBeVisible.show();
    }

});

$(".previous").click(function(e) {
    var $visibleOne = $(".pages:visible");
    var $PrevToBeVisible = $visibleOne.prev('div.pages');

    if($PrevToBeVisible.length > 0) {
        $visibleOne.hide();
        $PrevToBeVisible.show();
    }
});
于 2013-03-06T10:52:26.860 回答