代码之家 › 专栏 › 技术社区 › Oren Hizkiya

帮助调试JQuery脚本

jquery javascript

Oren Hizkiya · 技术社区 · 15 年前

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

3 回复 | 直到 15 年前

Jeff Rupert 15 年前

i nth-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;
    }
);

这是未经测试,但至少应该是体面的伪代码。

BGerrissen 15 年前

手动输入索引(1)时,循环4次并淡入第一个子项4次。当您使用i时,它们都会淡入四次,因为字符串中的i不是对i变量的引用,它只是字符串的一部分。

$(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");
        }
});

应该有用,注意 "+i+"

更好的方法是:

$(function(){
    $('#slideshow p').each(function(i, node){
         setTimeout(function(){
             $(node).fadeIn("slow").delay(800).fadeOut("slow");
             node = null; //prevent memory leak
         }, i * 800);
    });
});