javascript - 自动显示和隐藏多个div

Question

我有数量不等的 div，标有数字“wrap”

<div id="wrap0">Fixed text</div>
<div id="wrap1"></div>
<div id="wrap2"></div>
<div id="wrap3"></div>

Wrap0是固定文本，wrap 1及其后的内容是从mysql php生成的。我想显示wrap0一段时间，隐藏wrap0并显示wrap1的内容，隐藏wrap1并再次显示wrap0，隐藏wrap0并显示wrap 2等。

我已经成功地使用 jquery 在它们之间切换了一个间隔:

var $j = jQuery.noConflict();    
$j(document).ready(function () {
        setInterval(function () {
            $j.fx.off = true
            $j('#wrap1').toggle('show');
            $j('#wrap0').toggle('hide');
        }, 3000);
    });

但是，这仅适用于 2 个 div。 div 的数量(换行)是可变的，它取决于 mysql 表中的行数。

我看过不同的脚本，但不知道如何使其自动工作，大多数脚本都使用单击函数，该函数隐藏 $(this)，即当前的 div。

如果随机切换会更容易吗？

Answer 1

$j(document).ready(function () {
    setInterval(function () {
        $j.fx.off = true
        var wraps = $j('*[id^=wrap]');               // get the jQuery array of elements
        var currentWrap = $j('*[id^=wrap]:visible'); // get the currently visible wrap element
        var idx = Array.prototype.indexOf.apply(wraps, currentWrap); // get its index
        currentWrap.hide();                          // hide it
        var nextIndex = (idx+1) % wraps.length;      // calculate the next index while taking into consideration the maximum length of the wraps array
        var nextWrap = $j(wraps[nextIndex]);          // get the next element
        nextWrap.show();                             // show it
    }, 3000);
});

如果#wrapN 元素没有改变，您可以将wraps 变量向上移动一个闭包以提高性能。

有关选择器信息，请参阅 official docs

编辑

正如评论中指出的，IE8或以下版本不支持indexOf，在这种情况下您可以使用 $.inAarray :

var idx = $j.inArray(currentWrap, wraps);

注意:同样，如果换行不改变，jessegavin 的解决方案性能更高。