jquery - 如何使用 JQuery 逐一显示列表？

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作为回调返回的值传递

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

演示：小提琴

Answer 2

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

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