Question

我想使用JQuery逐个显示/隐藏列表，这是我的代码：清单：

<p>This is the text</p>
<p>This is the text 1</p>
<p>This is the text 2</p>

按钮功能：

$("#hide").on("click", function(event) {
hideList($("p"), 0);
});

以下是隐藏/显示列表的功能：

function hideList(list, index) {
    if (index < list.length) {
        list.eq(index).toggle(2000, hideList(list, index+1));
    } else {
        return;
    }
}

但是当点击按钮时，3 <p>会隐藏在一起，而不是一个一个。但是这样的代码有效，<p>逐个显示：

$("#show").on("click", function(event) {
    $("p").eq(0).toggle(2000, function() {
        $("p").eq(1).toggle(2000, function() {
            $("p").eq(2).toggle(2000);
        });
    });
});

有谁知道导致这个问题的原因？非常感谢你。

Answer 1

你需要传递一个函数引用作为toggle的完整回调，在你调用函数的情况下，传递hideList - undefied返回的值作为回调< / p>

function hideList(list, index) {
    if (index < list.length) {
        list.eq(index).toggle(2000, function(){
            hideList(list, index+1)
        });
    } else {
        return;
    }
}

演示：Fiddle

Answer 2

Arun的回答是正确的，但为什么不继续使用jquery。使用延迟和队列。

function hideList(list){
 $(list).each(function(index, element) {
        $(this).delay(2000*index).queue(
            function(n){
                $(this).toggle()
                n();
            })
    })
}

如何使用JQuery逐个显示列表？

2 个答案: