如何使用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

一個想法：

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

Answer 2

試試這個：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 3

這應該工作：

<div id="back">back</div> 
<div> 
<div id="div1">div 1</div> 
<div id="div2">div 2</div> 
<div id="div3">div 3</div> 
<div id="div4">div 4</div> 
<div id="div5">div 5</div> 
<div id="div6">div 6</div> 
</div> 
<div id="next">next</div> 

$(function(){ 
    $("#div2, #div3, #div4, #div5, #div6, #back").hide(); 
    $("#next").on("click", function(){ 
     $("[id^=div]:visible").hide().next().show(); 
     $("#back").show(); 
     if($("[id^=div]:visible").index() === $("[id^=div]").length-1) { $("#next").hide(); } 
    }); 
    $("#back").on("click", function(){ 
     $("[id^=div]:visible").hide().prev().show(); 
     $("#next").show(); 
     if($("[id^=div]:visible").index() === 0) { $("#back").hide(); } 
    });  
}); 

這裏是Fiddle