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

Updated fiddle

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

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

6 个答案: