javascript - 帮助调试 JQuery Fade 脚本

Question

在我第一次接触 JQuery 时，我有一个非常简单的目标，即单步执行 div 的子项并将它们一个接一个地淡入淡出。但是出于某种原因，如果我手动为 nth-child 定义一个索引，比如说 1，那么第一个 child 会淡入淡出四次。但是，如果我使用变量“i”，那么所有的 child 都会淡入淡出四次。为什么会这样？

这是我的代码:

<div id="slideshow">
    <p>Text1</p>
    <p>Text2</p>
    <p>Test3</p>
    <p>Text4</p>
</div>

<script>
$(document).ready(function() {
        var $elements = $('#slideshow').children();
        var len = $elements.length;
        var i = 1;
        for (i=1;i<=len;i++)
        {
            $("#slideshow p:nth-child(i)").fadeIn("slow").delay(800).fadeOut("slow");
        }
});
</script>

每个段落最初都设置为display: none;。

Answer 1

你需要转义i。现在，nth-child 正在寻找索引为 i 的 child ，而不是 0、1、2 等。因此，请改用:

$('#slideshow p:nth-child(' + i + ')').fadeIn('slow').delay(800).fadeOut('slow');

但是，我认为这不会一次完成一个；事实上，我很确定它不会。如果没有，请尝试这样的操作:

var delay = 0;
$('#slideshow p').each(
    function (index, item)
    {
        $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow');
        delay += 2200;
    }
);

那是未经测试的，但至少应该是不错的伪代码。