单击时更改按钮形状
问题描述:
我正在为学生设计评估系统。 我想在老师点击时更改学生的成绩。 我有2个“等级”图像,我可以像这样切换:“A”,点击“B”后... &等等。 我现在使用实现这个任务的功能,如下所示:单击时更改按钮形状
function ChangeClass(object)
{
var objectClass = $(object).attr('class');
if (objectClass == 'zero') {
$(object).removeClass('zero');
$(object).addClass('one');
}
else if (objectClass == 'one')
{
$(object).removeClass('one');
$(object).addClass('two');
}
else if (objectClass == 'two') {
$(object).removeClass('two');
$(object).addClass('zero');
}
}
但我不喜欢这样的解决方案,我想有可能在jQuery的东西更容易或什么来改变按钮形状,或切换图像用。 如果您有任何意见,请分享=)
答
试试这个:
var classes = ["zero", "one", "two"],
i = classes.indexOf(object.className);
object.className = classes[(i + 1) % classes.length];
没有必要的jQuery的,但请记住,indexOf
数组不是由IE8和更低的支撑,它必须被仿效。
我假设object
是一个有效的DOM元素。
答
,如果你想使用jquery在所有浏览器中工作,就可以使用它:
var max = 3; //total button or button class
function ChangeClass(object){
var i = $(object).split('_')[1]; //this will explode 1 from className_1
var a = "className_" + i; // instead of zero, one, two use className_1, className_2, className_3
var b = (i+1) % max;
b = "className_" + b;
var x = "." + a;
$(x).click(function(){
$(this).removeClass(a).addClass(b);
});
}
您可以使用此解决方案的任何数量的按钮,不仅为3个按钮零,一,二。我希望这个能帮上忙 !