我正在使用 Materialize CSS ( http://materializecss.com/ ) 框架,它有(诚然,一个臃肿的样式表,里面装满了)颜色的类名;类名遵循以下逻辑:
.blue {}
.blue.darken-1 {}
.blue.lighten-1 {}
“变暗”和“变亮”从 1 到 5 递增。我正在尝试编写一个在悬停时增加类的函数;因为有些元素会有一个颜色名称blue
类blue lighten-3
(indexOf
不过,我不禁觉得这种方法效率低下且笨拙。有任何想法吗?
function darkenClass(theclasses, theelem) {
var gotclass = theclasses;
var gotelem = theelem;
if (gotclass.indexOf('darken-1') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("darken- 1", "darken-2"));
} else if (gotclass.indexOf('darken-2') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("darken-2", "darken-3"));
} else if (gotclass.indexOf('darken-3') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("darken-3", "darken-4"));
} else if (gotclass.indexOf('darken-4') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("darken-4", "darken-5"));
} else if (gotclass.indexOf('lighten-5') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("lighten-5", "lighten-4"));
} else if (gotclass.indexOf('lighten-4') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("lighten-4", "lighten-3"));
} else if (gotclass.indexOf('lighten-3') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("lighten-3", "lighten-2"));
} else if (gotclass.indexOf('lighten-2') > -1) {
gotelem.attr("class", "").attr("class", gotclass.replace("lighten-2", "lighten-1"));
} else {
gotelem.addClass("darken-1");
}
}