我有一组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;
}
答案 0 :(得分:0)
您的代码的第一个版本中未添加该类,因为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++); /// <----
}
};
});
}