onClick更改背景图片

Question

How could I make my current script rotate between 3 defined colors or images to change out the body's background ?

Currently I have this: http://jsfiddle.net/VgM3e/

<button class="color">click to change color</button>



   $(document).ready(function(){
      $('body').on("click", function(){
         $(this).css({'background' : 'red'});
      });
   });

But I am having difficulty coming up with the logic to rotate between 3 defined colors or images. I appreciate any assistance.

Answer 1

check my fiddle...if this is what you want http://jsfiddle.net/VgM3e/2/

 $(document).ready(function(){
  var rotate = 0;
  var colors = ["blue","red","green"];
  $('body').on("click", function(){

     $(this).css({'background' : colors[rotate]});
      rotate++;
      if(rotate >= 3){
      rotate = 0;
      }

   });
});

Answer 2

Something like this?

   $(document).ready(function(){
   var ex = 0;

  $('body').on("click", function(){
      ex = (ex+1)%3;
      if (ex == 0) { $(this).css({'background' : 'red'}) }
      else if (ex == 1) { $(this).css({'background' : 'green'}) }
      else { $(this).css({'background' : 'blue'}) }
  });
 });

Answer 3

There you go:

$(document).ready(function(){
    var colors = ["red", "blue", "green"];
    var current = 0;
    $('body').on("click", function(){
        $(this).css({'background' : colors[current]});
        if (current >= colors.length - 1) {
            current = 0;
        }
        else { current++ };
    });
});

All you need to do is make sure there are valid color strings in the colors array. If you wanted to do background images you would just change the colors to urls (in string format, of course) and change the .css() function as necessary.

Answer 4

try this one

i=0;
$(document).ready(function(){
      $('body').on("click", function(){
switch (i)
{
case 0:
         $(this).css({'background' : 'red'});
        break;

case 1:
         $(this).css({'background' : 'green'});
        break;

case 2:
         $(this).css({'background' : 'blue'});
        break;
}
i++;
if(i==3)i=0;
      });
   });

http://jsfiddle.net/prollygeek/VgM3e/3/