切換三個或更多div的可見性

Question

我有一個簡單的腳本切換兩個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>

它工作得很好，但我無法弄清楚如何添加更多的div。

http://jsfiddle.net/mxwv85px/1/

任何幫助深表感謝...

Answer 1

要遍歷一組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();

更新了小提琴

Answer 2

.toggle（）表示div在隱藏和顯示之間切換。 我建議使用.hide（）和.show（），因為這可以讓您更好地控制要顯示的內容。 但是，缺點是你需要一個代碼更多的代碼。 在我嘗試為你做這樣的事情的時候給我一點時間。

目前你只能有2個div，因為.toggle（）函數只能有2個值，這意味着第三個div與另一個div具有相同的值，導致它可見或隱藏，而另一個div也是如此。

@Rory McCrossan在這個答案中提供的代碼已經有效，所以我將不再嘗試自己編程： https ：//stackoverflow.com/a/27447139/4274852

Answer 3

您可以遍歷所選元素並僅顯示每個調用一個

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

http://jsfiddle.net/mxwv85px/9/

Answer 4

你可以這樣做

http://jsfiddle.net/mxwv85px/13/

代碼

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

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

Answer 5

首先，將計時器置於toggle_contents函數之外。 其次，添加到div公共類，緩存它們並使用變量緩存操作

 $(window).load(function(){ var divs = $('.some-class'); function toggle_contents() { divs.toggle(); } setTimeout(function(){ toggle_contents() }, 25000) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="some-class"> </div> <div class="some-class"> </div> <div class="some-class"> </div> 

Answer 6

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

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