使用 jQuery 递增或递减 class 名称
Increment or decrement class name with jQuery
我正在使用 Materialize CSS (http://materializecss.com/) 框架,该框架具有(诚然,一个臃肿的样式表,充满)class 颜色名称; class 名称遵循以下逻辑:
.blue {}
.blue.darken-1 {}
.blue.lighten-1 {}
"Darken" 和 "lighten" 从 1-5 递增。我正在尝试编写一个在悬停时增加 class 的函数;因为某些元素将具有颜色名称 class (blue
),而其他元素将具有颜色名称和 "darken" 或 "lighten" 修饰符 class(即 blue lighten-3
),我采用了使用 indexOf
搜索元素的 classes 的方法。不过,我不禁觉得这种方法效率低下且笨拙。有什么想法吗?
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");
}
}
$('element').mouseover(function () {
var classList = $(this).attr('class').split(' ');
classList.forEach(function (clss) {
if (clss.indexOf('darken') > -1) {
var color = clss.split('-')[0];
var desiredNumber = clss.split('-')[1] + 1;
$(this).removeClass(clss).addClass(color + '-' + desiredNumber);
}
else if (clss.indexOf('lighten') > -1) {
var color = clss.split('-')[0];
var desiredNumber = clss.split('-')[1] - 1;
$(this).removeClass(clss).addClass(color + '-' + desiredNumber);
}
});
})
一种方法在 html 元素上使用数据属性:
html:
<div class="darken-3" data-darken="3"><!-- ... --></div>
<div class="lighten-2" data-lighten="2"><!-- ... --></div>
<!-- etc -->
js:
function darkenClass(theclasses, theelem) {
var n_dark
, n_light
;
n_dark = parseInt($(theelem).attr('data-darken')) || 0;
n_light = parseInt($(theelem).attr('data-lighten')) || 0;
if ((n_dark > 0) && (n_dark < 5)) {
$(theelem).removeClass('darken-' + n_dark );
n_dark++;
$(theelem).attr('data-darken', n_dark);
$(theelem).addClass('darken-' + n_dark);
}
else {
if ((n_light < 6) && (n_light > 1)) {
$(theelem).removeClass('lighten-' + n_light );
n_light--;
$(theelem).attr('data-lighten', n_light );
$(theelem).addClass('lighten-' + n_light );
}
else {
$(theelem).addClass('darken-1' );
}
}
}
我正在使用 Materialize CSS (http://materializecss.com/) 框架,该框架具有(诚然,一个臃肿的样式表,充满)class 颜色名称; class 名称遵循以下逻辑:
.blue {}
.blue.darken-1 {}
.blue.lighten-1 {}
"Darken" 和 "lighten" 从 1-5 递增。我正在尝试编写一个在悬停时增加 class 的函数;因为某些元素将具有颜色名称 class (blue
),而其他元素将具有颜色名称和 "darken" 或 "lighten" 修饰符 class(即 blue lighten-3
),我采用了使用 indexOf
搜索元素的 classes 的方法。不过,我不禁觉得这种方法效率低下且笨拙。有什么想法吗?
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");
}
}
$('element').mouseover(function () {
var classList = $(this).attr('class').split(' ');
classList.forEach(function (clss) {
if (clss.indexOf('darken') > -1) {
var color = clss.split('-')[0];
var desiredNumber = clss.split('-')[1] + 1;
$(this).removeClass(clss).addClass(color + '-' + desiredNumber);
}
else if (clss.indexOf('lighten') > -1) {
var color = clss.split('-')[0];
var desiredNumber = clss.split('-')[1] - 1;
$(this).removeClass(clss).addClass(color + '-' + desiredNumber);
}
});
})
一种方法在 html 元素上使用数据属性:
html:
<div class="darken-3" data-darken="3"><!-- ... --></div>
<div class="lighten-2" data-lighten="2"><!-- ... --></div>
<!-- etc -->
js:
function darkenClass(theclasses, theelem) {
var n_dark
, n_light
;
n_dark = parseInt($(theelem).attr('data-darken')) || 0;
n_light = parseInt($(theelem).attr('data-lighten')) || 0;
if ((n_dark > 0) && (n_dark < 5)) {
$(theelem).removeClass('darken-' + n_dark );
n_dark++;
$(theelem).attr('data-darken', n_dark);
$(theelem).addClass('darken-' + n_dark);
}
else {
if ((n_light < 6) && (n_light > 1)) {
$(theelem).removeClass('lighten-' + n_light );
n_light--;
$(theelem).attr('data-lighten', n_light );
$(theelem).addClass('lighten-' + n_light );
}
else {
$(theelem).addClass('darken-1' );
}
}
}