Question

我有一组path元素，这些路径包含我正在检查它们是否与condition匹配的类，每次匹配condition时，类{{1}需要添加到它

active

上面的代码不是添加类tho，也不是按顺序添加它。理想情况下，我喜欢通过css进行颜色填充更改动画，以下将直接应用它。

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

如果我执行以下操作，它可以正常工作，但没有顺序：

path.active {
  fill: #ff4d4a;
}

Answer 1

您的代码的第一个版本中未添加该类，因为this不是您认为的那样。您向setTimeout提供的回调将this绑定到全局对象（如果处于严格模式，则为undefined）。通过绑定this（或使用箭头函数）来解决这个问题：

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

要获得动画效果，您应该根据 i ：

增加延迟

    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++); /// <----
      } 
    }; 
  });
}

如何按顺序添加活动类？

1 个答案: