将div类聚集到javascript数组中

我当前的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>

 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）。

你会喜欢：

编辑：更精确的一个：

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

你会喜欢的：

编辑：更精确的一个：

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

---

这样的办法应该行得通

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

函数开关nextitem（）{
var items=['item0'、'item1'、'item2'、'item3'、'item4']；
对于（var i=0；i类似的东西应该可以工作

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

函数开关nextitem（）{
var items=['item0'、'item1'、'item2'、'item3'、'item4']；
对于（var i=0；我想你会对跳入
jQuery
的简单世界感兴趣吗？你会对跳入
jQuery
的简单世界感兴趣吗？啊！我一直在
Java
，
C
和
C++
这三个方面做得太多了！谢谢你，我会查出来。如果有多个方面是相同的，这是不相等的（可能不可能）。您还必须处理最后一个案例的换行操作，
next
不会换行到第一个项目。你们两个是最好的。两个解决方案都有效。但是，pimvdb，我想知道是否有
$（'div.wrapper:visible'）.hide（）.previous（）.show（）
我有后退按钮的地方该怎么走？@Julian Assange:它叫
。prev
：）@Julian Assange:也一样，但是不要使用
：eq（0）
，而是使用
：last
（如果这能解决问题，你也可以使用
：first
。）嘎！我在
Java
、
C#
和
C++
方面做得太多了！谢谢，我会检查一下。如果不止一个是块，这是不等价的（可能不可能）。您还必须处理最后一个案例的换行处理，
next
不会换行到第一个项目。你们两个是最好的。两个解决方案都有效。但是，pimvdb，我想知道是否有
$（'div.wrapper:visible'）.hide（）.previous（）.show（）
我有后退按钮的地方该怎么走？@Julian Assange:它叫
。prev
：）@Julian Assange:也一样，但是不要使用
：eq（0）
，而是使用
：last
（如果这能解决问题，你也可以使用
：first
。）+我忘记了这一点。但是，你需要
（I+1）%items。虽然长度
。谢谢你们两位给出的两个好答案。我会尝试一下。：）很好，更新了。当我输入它时，我想到了这一点，但忘记了检查是否需要括号。+1对于再次移动到末尾的第一个，我忘记了这一点。但是，您需要
（I+1）%items.length
尽管如此。感谢你们两位给出了两个好的答案。我将尝试一下。：）好的观点，已更新。当我键入时，我想到了这一点，但忘记检查是否需要括号。