jQuery/Javascript - 循环

Question

我想这样做,当我点击我网站的某个地方时,背景会发生变化.我有三个背景,我想制作一个循环.

$(document).ready(function() {
 $('body').click((function(){
  return function()
  {
   if (counter == null) {
    var counter = 1;
   }
   if(counter == 3) {
     $(this).css("background-image","url(3.jpg)");
     $(this).css("background-position","10% 35%");
     var counter = null;
   }
   if(counter == 2) {
     $(this).css("background-image","url(2.jpg)");
     $(this).css("background-position","10% 35%");
     var counter = 3;
   }
   if(counter == 1) {
     $(this).css("background-image","url(1.jpg)");
     $(this).css("background-position","40% 35%");
     var counter = 2;
   }


  }
 })());

});

为什么这不起作用？

Answer 1

您的counter变量没有确定范围,您需要一个 counter变量.总的来说,为什么不让.toggle()你管理这个？这是它的样子:

$(function() {
  $('body').toggle(function(){
     $(this).css({"background-image":"url(1.jpg)", "background-position":"40% 35%"});
  }, function() {
     $(this).css({"background-image":"url(2.jpg)", "background-position":"10% 35%"});
  }, function() {
     $(this).css({"background-image":"url(3.jpg)", "background-position":"10% 35%"});
  });
});

虽然名称和常用用法表明.toggle()只需要2个函数,但它实际需要2个或更多,并将循环使用它们.