JQuery 依次显示和隐藏 p 个元素

Question

我正在尝试使用 JQuery 遍历多个 p 元素来显示和隐藏它们，但我就是无法让它工作。我也试过 for 循环。当前显示和隐藏所有 p 元素，我想一个接一个地显示和隐藏它们。这是我的代码：

HTML

<p hidden="" class="tweet-1">"Lorem Ipsum"</p>
<p hidden="" class="tweet-2">"Lorem Ipsum"</p>
<p hidden="" class="tweet-3">"Lorem Ipsum"</p>

等等

JQuery

var i=0
    $("p").each(function() {

    $(".tweet-" + i).show().hide();
    i+=1

    });

Answer 1

不太明白

但是修复你的 js :

var i=0;
$("p").each(function() {
$(".tweet-" + i).show(1000).hide(2000);
i+=1;
});

而且我认为你添加一个 delay() 会很好，比如：How can I use delay() with show() and hide() in Jquery

Answer 2

这对我有用：

$("[class^=tweet-]").each(function(index){   
  $(this).delay(500*index).fadeIn();  
});

但我需要更改 css 显示 none 段落中的 "hidden" 属性。

<p class="tweet-1" style="display:none">"Lorem Ipsum 1"</p>
<p class="tweet-2" style="display:none">"Lorem Ipsum 2"</p>
<p class="tweet-3" style="display:none">"Lorem Ipsum 3"</p>

Answer 3

如果您希望 p 元素一次只显示一个，那么实现此功能的最佳方法是使用 jQuery promises。此外，您可能会考虑使用 i = 1 而不是 i = 0，因为您没有 class "tweet-0".

var i=1;
var arrayOfPromises = [];

$("p").each(function() {

    if (i == 1)
    {
        $(".tweet-" + i).show();
    }
    else
    {
        $.when(arrayOfPromises[i-1]).done(function() {
            $(".tweet-" + i).show();
        });
    }

    arrayOfPromises.push($(".tweet-" + i).hide());
    i+=1;
});

JQuery 依次显示和隐藏 p 个元素

JQuery showing and hiding p elements one after the other

html

jquery

loops

show

hide