javascript - 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 个或更多，并且会循环使用它们。