Javascript 切换三个或更多div的可见性

我有一个简单的脚本，可以切换两个div的可视性：

<script type='text/javascript'>
    $(window).load(function(){
        function toggle_contents() {
            $('#page1').toggle();
            $('#page2').toggle();
            setTimeout(function(){
                toggle_contents()
            }, 25000)
        }
        toggle_contents();
    });
</script>

<div id="container">
    <div id="page1">This is page 1 contents.</div>
    <div id="page2" style="display:none;">This is page 2 contents.</div>
</div>

$（窗口）。加载（函数（）{
函数切换_contents（）{
$（'#page1'）。toggle（）；
$（'#page2'）。toggle（）；
setTimeout（函数（）{
切换内容（）
}, 25000)
}
切换_内容（）；
});
这是第1页的内容。
这是第2页的内容。

它工作得很好，但我不知道如何添加更多的div组合

非常感谢您的帮助

.toggle（）表示在隐藏和显示之间切换div。我建议改用.hide（）和.show（），因为这样可以更好地控制要显示或不想显示的内容。然而，缺点是您需要一个有更多行的代码。给我一点时间，我试着为你做这样的事

当前只能有2个div，因为.toggle（）函数只能有2个值，这意味着第三个div的值将与另一个div的值相同，从而使它在另一个div同时可见或隐藏

@Rory McCrossan在回答中提供的代码已经在运行，因此我将停止尝试自己编程：

---

要添加更多div，可以使用.append，例如：

$('#container').append('<div id="page3">This is page 3 contents</div>');

$（“#容器”）.append（'这是第3页内容'）；

要循环使用一组div，您可以在活动的

div

上使用一个类，然后使用

next

在每次迭代中移动。大概是这样的：

function toggle_contents() {
    var $active = $('#container .active');
    if ($active.length && $active.next().length) {
        $active.hide().removeClass('active').next().show().addClass('active');
    }
    else {
        $('.active').hide();
        $('#container div:first').show().addClass('active');
    }

    setTimeout(toggle_contents, 3000)
}
toggle_contents();

---

您可以循环浏览所选元素，每次调用仅显示一个元素

var page=0;
function toggle_contents() {
    $('.page').hide();
    var array = $('.page').toArray();
    $(array[page]).show(); 
    page=++page%array.length;
    setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();

你可以这样做

代码

<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
<div id="page3" style="display:none;">This is page 3 contents.</div>
<div id="page4" style="display:none;">This is page 4 contents.</div>
<div id="page5" style="display:none;">This is page 5 contents.</div>

这是第1页的内容。
这是第2页的内容。
这是第3页的内容。
这是第4页的内容。
这是第5页的内容。

功能切换_内容（）{
变量项=$（“#容器div”）；
对于（变量i=0；i

首先，将计时器置于“切换内容”功能之外。其次，添加到divs公共类中，缓存它们并使用变量缓存进行操作

$（窗口）.load（函数（）{
var divs=$（'.some class'）；
函数切换_contents（）{
divs.toggle（）；
}
setTimeout（函数（）{
切换内容（）
}, 25000)
});

不清楚您在问什么……我希望能够在组合中添加更多的div。这是第3页的内容。这是第4页的内容。谢谢凯文。谢谢你的帮助！我对这一切都是陌生的，我试图自学！我必须一直这么做，凯文是对的，但我会更进一步。给所有类型一个类，然后是$（“.class”）.hide、$（“.id”）.show（）；这将减少很多行，并使以后添加或删除页面更容易（可重用代码）
.toggle（）
没有错，只是更难阅读。如果您将Rory答案中出现的所有
显示
和
隐藏
替换为
切换
，则仍然有效；但它也会看起来更丑。你所需要做的就是给目标一个句柄。@blgt它不会做询问者想要做的事情：你仍然会有同样的问题。这看起来和我想做的完全一样。我现在要试着实现它。Rory，有没有可能为每个div设置超时，这样一些div可以显示得比其他div长？为什么是-2？从OP中，他明确表示他想添加更多的div：“这很好，但我不知道如何在组合中添加更多div。”没关系——我看我误解了他所说的“添加更多div”
function toggle_contents() {
var items = $('#container div');

for(var i= 0; i < items.length; i++)
{
    if($(items[i]).is(":visible")) {
        $(items[i]).hide();
        i + 1 == items.length ? $(items[0]).show() : $(items[i+1]).show();
        break;
    }        

}

setTimeout(function(){ toggle_contents() }, 500)
}

toggle_contents();