收集DIV類轉換成JavaScript數組

Question

我現在的HTML如下：

<div class="wrapper" style="display:block;" id="item0"><!--- Stuff --></div> 
<div class="wrapper" style="display:none;" id="item1"><!--- Stuff --></div> 
<div class="wrapper" style="display:none;" id="item2"><!--- Stuff --></div> 
<div class="wrapper" style="display:none;" id="item3"><!--- Stuff --></div> 
<div class="wrapper" style="display:none;" id="item4"><!--- Stuff --></div> 

然後我有前進/後退鏈接，調用相應的JavaScript函數，它看起來像這樣：

function switchNextItem() { 
    var element0 = document.getElementById('item0'); 
    var element1 = document.getElementById('item1'); 
    var element2 = document.getElementById('item2'); 
    var element3 = document.getElementById('item3'); 
    var element4 = document.getElementById('item4'); 

    if (element0.style.display == 'block') { 
     element0.style.display = 'none'; 
     element1.style.display = 'block'; 
    } else if (element1.style.display == 'block') { 
     element1.style.display = 'none'; 
     element2.style.display = 'block'; 
    } else if (element2.style.display == 'block') { 
     element2.style.display = 'none'; 
     element3.style.display = 'block'; 
    } else if (element3.style.display == 'block') { 
     element3.style.display = 'none'; 
     element4.style.display = 'block'; 
    } else if (element4.style.display == 'block') { 
     element4.style.display = 'none'; 
     element0.style.display = 'block'; 
    } 
} 

有沒有可能讓我更動態地做到這一點？

謝謝！ （我不熟悉JavaScript）。

Answer 1

你會喜歡jQuery：http://jsfiddle.net/TCQum/。

function switchNextItem() { 
    $('div.wrapper:visible') .hide() .next()  .show(); 
//  select visible div | hide it | goto next | show that one 
} 

編輯：更精確的一個：

function switchNextItem() { 
    var next = $('div.wrapper:visible:eq(0)') 
       .hide() 
       .next('div.wrapper'); // next one will be stored in next 

    if(next.length === 0) { // if there is no next one, show first one agan 
     $('div.wrapper:eq(0)').show(); 
    } else { // otherwise show next one 
     next.show(); 
    } 
} 

而且隨着.prev：

function switchNextItem() { 
    var prev = $('div.wrapper:visible:eq(0)') 
       .hide() 
       .prev('div.wrapper'); // prev one will be stored in prev 

    if(prev.length === 0) { // if there is no prev one, show last one 
     $('div.wrapper:last').show(); 
    } else { // otherwise show prev one 
     prev.show(); 
    } 
} 

Answer 2

這樣的事情應該工作。

function switchNextItem() { 
    var items=['item0','item1','item2','item3','item4']; 

    for(var i=0;i<items.length;i++){ 
     var element = document.getElementById(items[i]); 

     if (element.style.display == 'block') { 
      element.style.display = 'none'; 

      var nextElement = document.getElementById(items[(i+1) % items.length]); 
      nextElement.style.display = 'block'; 

      break; 
     } 
    } 
}