javascript - 短い形式でjqueryを使用してdivの長いリストを表示および非表示にする方法

Question

これは私が持っているもので、うまくいきます。より少ないコード行でこれを行う方法について、より多くの経験を持つ誰かが光を当てることができるかどうか疑問に思っていました.

    $(function(){
    $("#div2, #div3, #div4, #div5, #div6, #back").hide();
    $("#next").on("click", function(){
    if($("#div1").is(":visible")){
        $("#back").show();
        $("#div2").show();
        $("#div1").hide();
    }
    else if($("#div2").is(":visible")){
        $("#div3").show();
        $("#div2").hide();
    }
    else if($("#div3").is(":visible")){
        $("#div4").show();
        $("#div3").hide();
    }
    else if($("#div4").is(":visible")){
        $("#div5").show();
        $("#div4").hide();
    }
    else if($("#div5").is(":visible")){
        $("#div6").show();
        $("#div5").hide();
    }
    });
    });

Answer 1

これを試してください：http://jsfiddle.net/DomDay/vy5U4/6

<div class="div-stepper">
    <div>div 1</div>
    <div>div 2</div>

    ... arbitrary number of divs ...

    <div>div n-1</div>
    <div>div n</div>
</div>

<div class="controls">
    <div id="back">back</div>
    <div id="next">next</div>
</div>

js

resetStepper()

$('#next').on( 'click', function() {
    $active = $('.div-stepper .active:not(:last-child)');
    $active.removeClass('active').next().addClass('active');
    $('#back').show();    
});

$('#back').on( 'click', resetStepper );

function resetStepper() {
    $('.div-stepper div').removeClass('active');
    $('.div-stepper div:first-child').addClass('active');
    $('#back').hide();    
}

これは div id に依存しませんが、便宜上、クラスでラッパー div を使用します。

（編集。「戻る」ボタンを忘れた）

(編集。「戻る」/「次へ」ボタンのクリック機能を含める: http://jsfiddle.net/DomDay/vy5U4/6/ )

Answer 2

アイデア：

$(function(){
    $("#div2, #div3, #div4, #div5, #div6, #back").hide();

    $("#btnNext").on("click", function(){
       var checked = false;
        $("div").each(function(){
            if ($(this).is(":visible"))
            {
                if (!checked)
                {
                    $(this).next().show();
                    $(this).hide();
                    checked = true;
                }
            }
        });
    });
});

http://jsfiddle.net/QYMEb/