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

将div类收集到javascript数组中

2 个答案: