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

这对我有用：

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

但我需要更改＆＃34;隐藏＆＃34;段落中的属性与css显示无。

<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 2

如果你想让p元素一次只显示一个，那么实现这个功能的最好方法就是使用jQuery promises。此外，您可能会考虑使用i = 1而不是i = 0，因为您没有“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;
});

Answer 3

我不确定。

但修复你的js：

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

我认为添加延迟（）会很好，例如：How can I use delay() with show() and hide() in Jquery

JQuery一个接一个地显示和隐藏p元素

3 个答案: