Javascript 如何在菜单中跟踪css类？

我们有一个具有

ul>li>a

结构的菜单，其中有添加到

标记的CSS类。当断点小于768px时，我们希望删除CSS类。在页面加载时，我可以毫无问题地添加和删除CSS类，但是如果窗口的大小调整为大于768px（宽度），我就很难再添加CSS类

棘手的部分是CSS类可能并不总是

颜色，例如红色。它们可能是不同的类型，如
bkg--black
或其他类型。我曾考虑为每个
存储一个数组，但发现在
on load
和
resize
函数中，它们不接收数组

如果使用jQuery调整窗口的大小，我将如何跟踪每个
的CSS类并将它们添加回去

这是我们试过的


$（函数（）{
$（窗口）.on（'load'，function（）{
如果（$（窗口）.width（）<768）{
var el=$（'someid'）；
el.find（“a”）.prop（“类”），功能（i，cls）{
返回cls。替换（/（^ |\s）（颜色）--\s+/g'）；
});
}
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
var el=$（'someid'）；
el.find（“a”）.prop（“类”），功能（i，cls）{
返回cls。替换（/（^ |\s）（颜色）--\s+/g'）；
});
}
否则{
//被困在这里。
}
});
});
.color--red{color:red；}
.color--blue{color:blue；}
.color--绿色{color:green；}


无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
我将此功能用于CSS


@媒体屏幕和（最小宽度：768px）{
.颜色--红色{
颜色：红色；
}
.颜色--蓝色{
颜色：蓝色；
}
.颜色--绿色{
颜色：绿色；
}
}
.颜色--红色{
颜色：首字母；
}
.颜色--蓝色{
颜色：首字母；
}
.颜色--绿色{
颜色：首字母；
}

无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
您可以将每个元素的类存储在本地
数组中。在
resize
上，您可以从该本地
数组
获取类


$（函数（）{
var classList=[]；
var reg=/（^ |\s）（颜色）--\s+/g；
$（文档）.ready（函数（）{
$（'#someid'）。查找（'a'）。每个（函数（索引）{
classList[index]=$（this.prop（'class'）.match（reg）；
});
如果（$（窗口）.width（）<768）{
var el=$（'someid'）；
//获取UL.menu，然后从链接中删除任何颜色CSS类。
el.find（“a”）.prop（“类”），功能（i，cls）{
返回cls.replace（reg.）；
});
}
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
var el=$（'someid'）；
//获取UL.menu，然后从链接中删除任何颜色CSS类。
el.find（“a”）.prop（“类”），功能（i，cls）{
返回cls.replace（reg.）；
});
}
否则{
$（'#someid'）。查找（'a'）。每个（函数（索引）{
类列表[index].forEach（颜色=>{
$（此）.addClass（颜色）；
});
});
}
});
});
.color--red{color:red；}
.color--blue{color:blue；}
.color--绿色{color:green；}


无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
无缝品牌资产投资的信息媒体
我运行了这个程序，它在CSS类包含is
color--
时运行良好。我看到你做了
var reg=/（^ |\s）（彩色）--\s+/g。假设没有
颜色--
但它只有
bkg--red
，这总是会增加
reg
@usernameabc的值，我刚刚测试了您提供的正则表达式。当然，您可以实现自己的
regex
，这将适用于您的案例。另外，这个问题的主要焦点是解决你遇到的问题，而不是正则表达式。我只是想确保我理解正确。我将处理这个
regex
。