Question

当用户点击previous和next标签时，我需要逐个显示许多div（在dinamically创建）。

我尝试过：

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

虽然不行。

Live jsfiddle

Answer 1

代码过于复杂。这是一个更简单的版本，几乎可以大声朗读它的工作原理：

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

<强> See it in action

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

Answer 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/

Answer 3

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

Answer 4

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

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

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

Answer 5

您已更新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();
    }
});

Jquery - 逐个显示div

5 个答案: