添加课程后，再次单击并添加课程

Question

as the title says I want to add classes to a div without using toggle.'

so basically I want to add a class to a footer, I can achieve this by using:

$('footer').click(function(){
   $('footer').addClass('class-one');
});

but the problem is that I want to add a class again by clicking once more while class-one exist

then again just adding

$('.class-one').click(function(){
     $('.class-one').addClass('class-two');
     $('.class-two').removeClass('class-one');
});

repeat this

$('.class-two').click(function(){
    $('.class-two).addClass('class-three');
    $('.class-three).removeClass('class-two);

doesn't work.

can someone tell me how I can achieve my goal? so i can repeat this like 5~9times?

If my question is hard to understand what Im trying to do is that

imagine Im clicking

picture of a ball and I click it so that it turns into triangle

when I click triangle it turns into a square

and I click it again and it turns into a hexagon

Answer 1

Put your classes in an Array and then use an index to access the class and also make use of a counter which will act as our index in this case, which we will update using increment operator.

var classes = ["class-one", "class-two"], counter = 0;
$('footer').click(function(){
    $(this).removeClass(classes[counter]).addClass(classes[counter++]);
});

Answer 2

Check this out:

Eg:

$('.one').click(function(e)
{
    $(e.currentTarget).removeClass('one');
    $(e.currentTarget).addClass('two');
});

Refer: http://jsfiddle.net/3uz03b5r/

Your Code:

$('.class-one').click(function(e){
     $(e.currentTarget).addClass('class-two');
     $(e.currentTarget).removeClass('class-one');
});

Answer 3

Fiddle Demo

Try this one

Html

<div class = "set0">Test<div>

Jquery

var i = 0;
$('.set'+i).on('click',function(){
    $(this).removeClass('set'+i);
    i++;
   $(this).addClass('set'+i);
});

Answer 4

Try this..

<div id="facts">
<p>(click me):</p>
<input type="hidden" class="old" value="0"/>
  <div class="class-1"><div>
</div>
<script>
$(document).ready(function() {
    var current = 1;
    $('#facts').click(function() {
     var old= $(".old").val();
      var newvalue= parseInt(current)+parseInt(old); 
$(".old").val(newvalue);      
    $('.class-'+old).addClass('class-'+newvalue);
   $('.class-'+newvalue).removeClass('class-'+old);

    });
});
</script>