シーケンスをアクティブにする方法は？

Question

私はpath要素とこれらのパスのセットを持っているが、彼らはconditionに一致する場合、私はチェックしていたクラスを持って、このconditionが一致するたびに、クラスactiveは、上記のコード

mapMatch(list); 

function mapMatch(list) { 
    $("svg path").removeClass("active"); 
    $("svg path").each(function(){ 
    for(var i = 0; i < list.length; i++) { 
     space = list[i].Space.replace(" ", "_"); 
     space = space.replace("[Image]\u00a0", ""); 
     if($(this).attr('class').split(" ")[0] == space) { 
     setTimeout(function() { 
      $(this).addClass("active"); 
     }, 1000); 
     } 
    }; 
    }); 
} 

それに追加する必要がありますクラスを追加していないし、順番に追加していない。理想的には、私は、CSSを介して色の塗りつぶしの変更のアニメーションをしたい、次の代わりにそれをまっすぐ前方に適用されます。

path.active { 
    fill: #ff4d4a; 
} 

私は次のことを行う場合、それは動作しますが、思いなしの配列を有する：

thisは、あなたがそれだと思うものではありませんので、このクラスは、コードの最初のバージョンで追加されていない

function mapMatch(list) { 
    $("svg path").removeClass("active"); 
    $("svg path").each(function(){ 
    for(var i = 0; i < list.length; i++) { 
     space = list[i].Space.replace(" ", "_"); 
     space = space.replace("[Image]\u00a0", ""); 
     if($(this).attr('class').split(" ")[0] == space) { 
     $(this).addClass("active"); 
     } 
    }; 
    }); 
} 

Answer 1

。 setTimeoutに指定したコールバックのグローバルオブジェクトにはthisがバインドされます（厳密モードの場合はundefined）。 thisを結合することによってこの問題を解決（または矢印機能を使用）：

setTimeout(function() { 
     $(this).addClass("active"); 
    }.bind(this), 1000); 

アニメーション効果を得るために、あなたは私がに応じて遅延時間を増やす必要があります。

setTimeout(function() { 
     $(this).addClass("active"); 
    }.bind(this), 1000 * i); 

クラスが適用されるべきである場合異なる時刻に外側のeachループについても同様に、別のカウンタを導入してください。

function mapMatch(list) { 
    var j = 0; /// <------ 
    $("svg path").removeClass("active"); 
    $("svg path").each(function(){ 
    for(var i = 0; i < list.length; i++) { 
     space = list[i].Space.replace(" ", "_"); 
     space = space.replace("[Image]\u00a0", ""); 
     if($(this).attr('class').split(" ")[0] == space) { 
     setTimeout(function() { 
      $(this).addClass("active"); 
     }.bind(this), 1000 * j++); /// <---- 
     } 
    }; 
    }); 
}