changer le fond d'un élément en utilisant la propriété CSS

Question

J'ai une div avec un arrière-plan et j'aimerais changer la position de l'arrière-plan au clic.

Voici mon extrait de code jQuery:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    });

Tant que cela fonctionnera bien, j'aimerais revenir à la position d'origine avec un "second" clic, en réinitialisant tout.

Mmm, est-ce que c'est ce qu'on appelle un "rappel", n'est-ce pas?

J'ai essayé avec ça mais ça n'a pas marché:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    },
    function() {
        $(this).css('backgroundPosition','40px');
    }
    );

Merci pour toute information.

Answer 1

Vous devriez envisager d'utiliser un " toggle " fonctionne pour cela ... Cela vous permettra de choisir entre 2 classes CSS différentes ... Consultez ce tutoriel ici .

$('#sprite').click(function() {
   $(this).toggle(
      function(){
    $(this).css('backgroundPosition', '40px');
      }, 
      function () {
    $(this).css('backgroundPosition', '-40px');
    });
});

Une autre option plutôt que de définir directement la propriété CSS serait de créer une classe CSS pour votre arrière-plan et de simplement basculer cette classe.

CSS

<style type="text/css">
    .spritebg { background-position: -40px; }
</style>

jQuery

$("#spite").click(function() {
   $(this).toggleClass("spritebg");
});

Answer 2

Faites-le avec les classes. C'est beaucoup plus facile.

<style type="text/css">
#spite.moved { background-position: -40px; }
</style>

<script type="text/javascript">
$(function() {
  $("#spite").click(function() {
    $(this).toggleClass("moved");
  });
});
</script>

Answer 3

Vous comprenez mal le concept de rappel. Un rappel en programmation est une fonction appelée immédiatement après le code en cours d’exécution.

Dans votre cas, vous dites ce qui suit:

Au clic, définissez ma position d'arrière-plan sur -40px. Une fois que vous avez terminé, réglez-le sur 40 pixels (annulant immédiatement ce que votre fonction vient de faire).

Dans ce cas, vous n'avez pas besoin d'utiliser une fonction de rappel. Vous devez configurer une bascule pour que lorsque l'utilisateur clique sur votre élément, une fonction soit exécutée ... puis lors du prochain clic sur cet élément, la deuxième fonction est exécutée.