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