I have 3 images that I want to switch between. I put each one of them in a class & change it's image in the css. I can now switch between 2 classes but when I add the third one the code doesn't work. Any class of them can be the starting one.

    $('.one').click(function(){                             
        $(this).toggleClass("two");
        $(this).toggleClass("one");

    });
     $('.two').click(function(){                             
        $(this).toggleClass("one");
        $(this).toggleClass("two");

    });

When I add this line:

        $(this).toggleClass("three"); 

It doesn't toggle at all....

Do you know a method in which I can put all of them in one function ?

Thanks.

I have 3 images that I want to switch between. I put each one of them in a class & change it's image in the css. I can now switch between 2 classes but when I add the third one the code doesn't work. Any class of them can be the starting one.

    $('.one').click(function(){                             
        $(this).toggleClass("two");
        $(this).toggleClass("one");

    });
     $('.two').click(function(){                             
        $(this).toggleClass("one");
        $(this).toggleClass("two");

    });

When I add this line:

        $(this).toggleClass("three"); 

It doesn't toggle at all....

Do you know a method in which I can put all of them in one function ?

Thanks.

• javascript
• jquery
• html
• toggleclass

• 1 could you make a practical example of what are you trying to accomplish and which is the desired result? – Fabrizio Calderan Commented Jun 5, 2012 at 8:54
• The user has an X pic for example green, when he clicks on it, it should be yellow, when he clicks on it, it should be red. If the image was already red, it should be green then yellow , If he started with a yellow one, it should be red then green then yellow ... & so on. – Sana Joseph Commented Jun 5, 2012 at 9:01
• 1 so you need to make a sequential cycle of class assignments, right? – Fabrizio Calderan Commented Jun 5, 2012 at 9:03

3 Answers 3

Example fiddle: http://jsfiddle.net/KdfEV/

This code will allow you to cycle through a sequence of defined classes

$('.one, .two, .three').click(function() {                             
    this.className = {
       three : 'one', one: 'two', two: 'three'
    }[this.className];
});

$('.one, .two, .three').click(function(){                             
        $(this).toggleClass("one, two, three");
    });

The safest way would be to remove unwanted classes and add the required class:

// Switch to class 'three'
$(this).removeClass('one').removeClass('two').addClass('three');