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.