收集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; 
     } 
    } 
}