单击时更改按钮形状

Question

我正在为学生设计评估系统。 我想在老师点击时更改学生的成绩。 我有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的东西更容易或什么来改变按钮形状，或切换图像用。 如果您有任何意见，请分享=）

Answer 1

试试这个：

var classes = ["zero", "one", "two"], 
    i = classes.indexOf(object.className); 
object.className = classes[(i + 1) % classes.length]; 

没有必要的jQuery的，但请记住，indexOf数组不是由IE8和更低的支撑，它必须被仿效。

我假设object是一个有效的DOM元素。

Answer 2

，如果你想使用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个按钮零，一，二。我希望这个能帮上忙 ！