帮助调试JQuery Fade脚本 [英] Help with debugging JQuery Fade Script

问题描述

对于我第一次涉足JQuery的业务之一，我有一个非常简单的目标:逐步遍历div的子级，然后逐个淡入和淡出.但是由于某种原因，如果我手动定义nth-child的索引(例如1)，则第一个子项会淡入和淡出四次.但是，如果我使用变量"i"，则所有子代都会淡入淡出四次.为什么会这样?

For one of my first ventures into JQuery, I have the very simple goal of stepping through the children of a div and fading them in and out one by one. For some reason though, if I manually define an index for nth-child, say 1, then the first child fades in and out four times. If I use the variable "i", however, then all of the children fade in and out four times. Why is this happening?

这是我的代码:

<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;.

Each of the paragraphs is set to display: none; initially.

推荐答案

您需要转义i.现在，nth-child正在寻找索引为i而不是0，1，2等的子级.因此，请使用:

You need to escape i. Right now, nth-child is looking for the child that has an index of i, not of 0, 1, 2, etc. So instead, use:

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

但是，我认为这不会一次完成.实际上，我敢肯定不会.如果没有，请尝试以下操作:

However, I don't think that will do one at a time; in fact, I'm pretty sure it won't. If it doesn't, try something like this:

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

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

That's untested, but should be decent pseudocode at the very least.

这篇关于帮助调试JQuery Fade脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！