jquery - 使用 setInterval 显示和隐藏 div 更多块

Question

我已经看到堆栈溢出线程根据间隔显示或隐藏 div。我不知道如何添加更多块。只有两个重复的块（块1和块2）。我需要添加块 3 和 4。请帮助我。我是 jquery 的新手。

代码：

var shortIntervalTime = 1500;
var longIntervalTime = 7500;

function cycle(id) {
    var nextId = (id == "block1") ? "block2" : "block1";
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(nextId)
    });
    // ---------------------------------------------
    // this code after here only for demo purposes
    var timer;
    var cntr;
    var iterations = 0;

    function initDisplayTimer() {
        cntr = 0;
        ++iterations;
        $("#iterations").html("Iterations: " + iterations);
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            ++cntr;
            $("#timer").html("Seconds: " + (cntr / 10).toFixed(1));
        }, 100);
    }
    // end of demo code
    // ---------------------------------------------
    cycle("block1");
});

参考线程

提前致谢。

Answer 1

http://jsfiddle.net/tamilmani/hT2yM/

试试这个演示...

var arr = ['block1','block2','block3'];

function cycle(id) {

    var nextId = (id < arr.length)?id:0;
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + arr[nextId])
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(++nextId)
    });
    }

Answer 2

有了这个 conde 你可以添加尽可能多的元素

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    function cycle(id) {
        var shortIntervalTime = 1 * 1000;
        var longIntervalTime = 2 * 1000;
        var next = ($('#'+id).next() && $('#'+id).next().attr('id')?$('#'+id).next().attr('id'):$('#'+id).parent().children()[0].id);
        $('#'+id).delay(shortIntervalTime)
            .fadeIn(500)
            .delay(longIntervalTime)
            .fadeOut(500, function() {cycle(next)});
    }
    $(function(){
        cycle('block1');
    });

    </script>
    <div id="blocks">
        <div id="block1">aaaa</div>
        <div id="block2">bbbb</div>
        <div id="asd">ccc</div>
    </div>

注意：所有<div>元素都应该有id，否则将不包括在内

Answer 3

我只能看到对分配 nextId 的条件语句的修改。问号运算符适用于单个条件。所以，

替换此代码
var nextId = (id == "block1") ? "block2": "block1";

和
var nextId="";
if(id == "block1")
nextId="block2";
else if(id == "block2")
nextId="block3";
else if(id == "block3")
nextId="block4";
else if(id == "block4")
nextId="block1";

但是对于更多的块，您应该使用 if 语句以外的其他方式。