Question

如何让我当前的脚本在3种定义的颜色或图像之间旋转以更改身体的背景？

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

您需要做的就是确保colors数组中有有效的颜色字符串。如果你想做背景图像，你只需要将颜色更改为网址（当然是字符串格式），并根据需要更改.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/

onClick更改背景图片

4 个答案: