Question

（这里新手）我有一个带有时间延迟值变量的setTimeout循环。它循环通过ul，将一个类添加到列表项，在预定的时间后它删除该类并跳转到下一个列表项;重复这个过程，直到它到达最后一个（li）

问题是时间延迟值的应用不正确。最后一个延迟值应用于倒数第二个列表项而不是最后一个。

<style type="text/css" media="screen">
li {display:none;} .go {color:green;display:block}
</style>

<ul>
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
<li>Fourth Slide</li>
<li>Fifth Slide</li>
<li>Sixth Slide</li>
</ul>

<a href="#" class="go-button">GO!</a>


    <script type="text/javascript" charset="utf-8">

$(".go-button").click(function() {

     $("li:nth-of-type(1)").addClass("go"); 

    var index = 0;
    var length = $("ul").children().length;
    var delays = [
            1000,
            1500,
            2000,
            2500,
            3000,
            15000

    ];

    function delayNext()
    {
        setTimeout(function() {
        $("ul li:eq(" + index +  ")").addClass("go").siblings().removeClass("go");
            index++;

            if (index == length)
                index = 0;

            delayNext();
        }, delays[index]);
    }

    delayNext();
});
</script>

Answer 1

像this之类的东西 ......虽然不是一个好的解决方案，但它可以做你打算做的......

您的代码中存在

问题
在点击事件中，您要将课程go添加到第一张幻灯片的第一个孩子，并在setTimeout上再次将课程go添加到幻灯片 :eq选择器遵循基于零的索引，因此当您到达第5张幻灯片时，您的计数器将设置为15000毫秒，即调用delayNext()之后的时间再次

在setTimeout循环中以错误的顺序应用时间延迟变量

1 个答案: