單擊時更改按鈕形狀

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個按鈕零，一，二。我希望這個能幫上忙 ！