单击按钮时更改按钮形状

Question

I'm working on an evaluation system for students. I want to change the grade of the student when the teacher clicks on it. I have 2 "grade" images that I switch between like that: "A" , after click "B" ... & so on. I now use a function that achieves this task, as follows:

  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');
        }
    }

But I don't like this solution, I guess there might be something easier in Jquery or something to change the buttons shape, or switch images with. If you have any ideas, please share them =)

Answer 1

Try this:

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

There's no need of jQuery, but keep in mind that indexOf for arrays isn't supported by IE8 and lower, and it must be emulated.

I'm assuming that object is a valid DOM element.

Answer 2

IF you want to use jquery working in all browsers you can use it:

       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);
                                });  
                              }

You can use this solution for any number of buttons, not only for 3 buttons-zero, one, two. I hope this will help !