jQuery / Javascript - loop

Question

I want to make it so when I click somewhere in my website, the background changes. I have three backgrounds, and I want to make a loop of them.

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


  }
 })());

});

Why doesn't this work?

Answer 1

Does this code work?

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

Answer 2

this no longer refers to the body element, it refers to the anonymous function.

Answer 3

Your counter variable isn't scoped right, you need one counter variable. Overall though, why not let .toggle() manage this for you? Here's what it would look like:

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

Although the name and common usages suggest that .toggle() only takes 2 functions, it actually takes 2 or more and will cycle through them.

Answer 4

Your function uses this which is refering to itself, not the element. This would fix it:

$('body').click((function(){
    var $this = $(this);
    return ... {
        $this // use $this instead of $(this)

Also, have a look on jQuery .toggle

Answer 5

Your counter declarations are strewn all over the place which makes it difficult to follow what's happening. Further, counter is declared local to the callback function, which means it loses its value every time the function executes.

Here's a simpler solution:

$(function() {  // this is equivalent to $(document).ready(...)
  var counter = 0;
  var images = [
    [ '1.jpg', '40% 35%' ],
    [ '2.jpg', '10% 35%' ],
    [ '3.jpg', '10% 35%' ]
  ];
  $('body').click(function() {
    $(this).css('background-image', 'url(' + images[counter][0] + ')');
    $(this).css('background-position', images[counter][1]);

    // increment counter, wrapping over to 0 when it reaches end of array
    counter = (counter + 1) % images.length;
  });
});

You can easily extend to this to any number of images by simply adding more entries to the images array.