修改

Question

我有一个可变数量的div，标有“wrap”，带有数字

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

Wrap0是一个固定的文本，换行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表中的行数。

我查看了不同的脚本，但无法弄清楚如何自动运行，大多数脚本都使用clickfunction，它隐藏了$（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的解决方案会更高效。

Answer 2

您需要创建一个包含所有包装器的数组，以及跟踪数组中当前位置的方法。

如下所示。 See a Demo

$j(document).ready(function () {
    var wrappers = $j("[id^=wrap]").hide();
    var length = wrappers.length;
    var index = -1;
    setInterval(function () {
        next = index + 1;
        if (next === wrappers.length) {
          next = 0;
        }
        wrappers.eq(index).hide();
        wrappers.eq(next).show();
        index++;
        if (index == wrappers.length) {
          index = 0;
        }
    }, 3000);
});

Answer 3

你可以尝试一些简单的事情：

<div id="wrap0">Fixed text0</div>
<div id="wrap1">Fixed text1</div>
<div id="wrap2">Fixed text2</div>
<div id="wrap3">Fixed text3</div>

<script type="text/javascript">
$(document).ready(function () {
var i = 0;
var numberOfWraps = 3; //value from SQL query
for (var j = i+1; j<=numberOfWraps; j++){
    $('#wrap'+j).toggle('hide');
}
setInterval(function () {
    if (i !== numberOfWraps){
    $('#wrap'+(i+1)).toggle('show');
    $('#wrap'+i).toggle('hide');
    i = i+1;
    }
    else{
    $('#wrap'+numberOfWraps).toggle('hide');
    i = 0;
    $('#wrap'+i).toggle('show');    
    }
}, 3000);
});
</script>

Answer 4

你要做的是为每个div分配一个类，然后控制是否隐藏或显示类名称，而不是ID。

<div id="wrap0" class="wrap"></div>

$j('.wrap').toggle('show');

自动显示和隐藏多个div

4 个答案:

修改