jQuery/Javascript - boucle

Question

Je veux faire en sorte que lorsque je clique quelque part sur mon site Web, l'arrière-plan change. J'ai trois origines, et je veux en faire une boucle.

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


    } 
})()); 

}); 

Pourquoi cela ne fonctionne-t-il pas?

Answer 1

Ce code fonctionne-t-il?

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 ne fait plus référence à l'élément body, il se réfère à la fonction anonyme.

Answer 3

Votre variable counter n'est pas à droite, vous avez besoin de une variablecounter. Dans l'ensemble cependant, pourquoi ne pas laisser .toggle() gérer cela pour vous? Voici ce qu'il ressemblerait à ceci:

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

Bien que le nom et les usages communs suggèrent que .toggle() ne prend que 2 fonctions, il faut en fait 2 ou plusieurs cycles et volonté à travers eux.

Answer 4

Votre fonction utilise this qui se réfère à elle-même, pas à l'élément. Cela fixerait:

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

En outre, have a look on jQuery .toggle

Answer 5

Vos counter déclarations sont éparpillés un peu partout ce qui rend difficile de suivre ce qui se passe. En outre, counter est déclaré local à la fonction de rappel, ce qui signifie qu'il perd sa valeur chaque fois que la fonction s'exécute.

est ici une solution plus simple:

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

Vous pouvez facilement étendre ce à un certain nombre d'images en ajoutant simplement plus d'entrées au tableau images.

Answer 6

$(document).ready(function() { 

    function changeBgImage() { 
     var imgs = [ 
      ["1.jpg", "10% 35%"], 
      ["2.jpg", "10% 35%"], 
      ["3.jpg", "40% 35%"] 
     ]; 
     var counter = 0; 

     return function() { 
      $(this).css({ 
       "backgroundImage": "url(" + imgs[counter][0] + ")", 
       "backgroundPosition": imgs[counter][1] 
      }); 
      counter += 1; 
      if (counter === imgs.length) { counter = 0; } 
     };  
    } 

    $('body').click(changeBgImage()); 

}); 

Mise à jour:

OK, nous avons donc ici une autre solution. C'est essentiellement la réponse de Nick mais sans redondance.

$(function() {  
    var imgs = [["1.jpg", "10% 35%"], ["2.jpg", "10% 35%"], ["3.jpg", "40% 35%"]]; 
    var i = 0;  
    $("body").click(function() { 
     $(this).css({"background-image": "url(" + imgs[i][0] + ")", "background-position": imgs[i][1]}); 
     if (++i === imgs.length) { i = 0; } 
    });  
});