Question

我试图在1秒间隙后突出显示每个菜单项。它工作正常，但我面临最后一个菜单项的问题。我补充道 $(strtemp).removeClass("change");用于清除最后一个菜单项，但该行在setInterval函数执行之前执行。我无法理解为什么？

my.js

$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==10){ 
                strtemp=str1;clearInterval(refreshID);
            }
            i++;
        }, 1000);
        $(strtemp).removeClass("change");
    });
});

的index.html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <script type="text/Javascript" src="jquery.js"></script>
        <script src="my.js"></script>
        <title>My Jquery</title>
    </head>
    <body>
        <div class="parent">
            <ol>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
            </ol>
        </div>
    </body>
</html>

stylesheet.css中

.parent{
    background-color: yellow;
    height:200px;
    width:400px;    
}

.change{
    border: 1px dotted green;
    background-color: red;
    height:15px;
    width:100px;
}

Answer 1

$(strtemp).removeClass调用外传递给setInterval的回调函数。函数内部的代码将执行每个tick，当click click处理程序触发时，外部的所有内容都将按顺序执行。

修改

您是否正在寻找以下内容：http://jsfiddle.net/qprjqy2n/？

$(document).ready(function(){ $(".parent").click(function(){ str = "li:nth-child("; strtemp=""; i=1; var refreshID=setInterval(function(){ str1=str.concat(i); str1=str1.concat(")"); str2=str.concat(i-1); str2=str2.concat(")"); if($(str2).hasClass("change")){ $(str2).removeClass("change"); } $(str1).addClass( "change" ); if(i==11){ strtemp=str1;clearInterval(refreshID); $(strtemp).removeClass("change"); } i++; }, 100); }); });

我很想知道你的总体目标是什么，因为几乎可以肯定会有一种更简单的方法。

Answer 2

你也可以这样做：

function atlast(strtemp)
{
    $(strtemp).removeClass("change");
}


$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==10){ 
                strtemp=str1;clearInterval(refreshID);
                atlast(strtemp);
            }
            i++;
        }, 1000);

    });
});

Answer 3

作为一个建议，更简单的方法：

    $(".parent").click(function() {
     lis = $(this).find('li');

     i = -1;

     inter = setInterval(function() {
       if (i < lis.length - 1) {
         i++;
         $(lis[i - 1]).removeClass('change');
         $(lis[i]).addClass('change');
         console.log($(lis[i]).text() + '_________________' + i);
       } else {

         console.log('end');
         $(lis[i]).removeClass('change');
         clearInterval(inter);
       }

     }, 1000);

   });

没有构建css选择器，修正计时器和小提琴链接... http://jsfiddle.net/Lb6v334a/1/

Answer 4

您也可以按照以下方式执行此操作

 var index=1; 
  var curretInterval;
$(".parent").click(function(){
    clearInterval(curretInterval);
    curretInterval=setInterval(function(){
            $("ol li:nth-child("+(index-1)+")").removeClass("change");
            $("ol li:nth-child("+index+")").addClass("change");
            index=index+1;
            index=index>11?1:index;
        },1000);

 });

JSFiddle也是如此 http://jsfiddle.net/prasadFiddle/405cnu39/23/

如果您想从开始时突出显示http://jsfiddle.net/prasadFiddle/405cnu39/24/

，则点击下一次

如果您只想运行此循环一次http://jsfiddle.net/prasadFiddle/405cnu39/25/

Answer 5

您可以使用嵌套的setTimeout函数，以下答案的灵感来自此SO帖子..

$(document).ready(function(){
$(".parent").click(function(){
    items = $(this).find('li');
    i = -1;
    len = items.length; 
    function animation_loop() {
            $(items[i]).addClass('change');
            setTimeout(function(){ 
            $(items[i]).removeClass('change');
            }, 100  );
        setTimeout(function() { 
            if (i < len) 
        {
            i++;
            animation_loop(); 

        } 

    }, 100);
    };
    animation_loop();
  });
});

Demo

JQuery代码在到达之前就已经执行了

5 个答案: