onClick change background image

Question

Как я могу заставить мой текущий скрипт вращаться между 3 определенными цветами или изображениями, чтобы изменить фон тела?

В настоящее время у меня есть это: http://jsfiddle.net/VgM3e/

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



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

Но я с трудностью подходя с логикой, чтобы вращать между 3 определенными цветами или изображениями. Я ценю любую помощь.

Answer 1

проверить мою скрипку ... если это то, что вы хотите 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

Что-то вроде этого?

$(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

Там вы идете:

$(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++ }; 
    }); 
}); 

Все, что вам нужно сделать, это убедиться, что есть действительные цвета строки в массиве цветов. Если вы хотите делать фоновые изображения, вы просто измените цвета на urls (в формате строки, конечно) и при необходимости измените функцию .css().

Answer 4

попробовать это один

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/