Ändern des Hintergrunds eines Elements mithilfe der CSS -Eigenschaft

Question

Ich habe eine DIV mit einem Hintergrund, und ich möchte die Position des Hintergrunds auf Klick ändern.

Dies ist mein JQuery -Snippet:

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

Während dies in Ordnung funktioniert, möchte ich mit einem "zweiten" Klick zur ursprünglichen Position zurückkehren und alles zurücksetzen.

Mmm, ist das ein "Rückruf" genannt, oder?

Ich habe es damit versucht, aber es hat nicht funktioniert:

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

Vielen Dank für alle Informationen.

Answer 1

Sie sollten dafür in Betracht ziehen, eine "Umschaltungs" -Funktion zu verwenden ... Sie können zwischen 2 verschiedenen CSS -Klassen gehen ... schauen Sie sich dieses Tutorial an hier.

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

Eine andere Option, anstatt die CSS -Eigenschaft direkt festzulegen, besteht darin, eine CSS -Klasse für Ihren Hintergrund zu erstellen und diese Klasse einfach umzuschalten.

CSS

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

JQuery

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

Answer 2

Mach es mit Klassen. Es ist viel viel einfacher.

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

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

Answer 3

Sie verstehen das Konzept eines Rückrufs. Ein Rückruf in der Programmierung ist eine Funktion, die unmittelbar nach dem ausführenden Code aufgerufen wird.

In Ihrem Fall sagen Sie Folgendes:

Setzen Sie bei Klicken meine Hintergrundposition auf -40px. Sobald Sie damit fertig sind, stellen Sie es auf 40px ein (sofort rückgängig, was Ihre Funktion gerade getan hat).

In diesem Fall müssen Sie keine Rückruffunktion verwenden. Sie müssen einen Umschalter einrichten, damit der Benutzer, wenn der Benutzer auf Ihr Element klickt, eine Funktion ausgeführt wird. Wenn er das nächste Mal auf dieses Element klickt, wird die zweite Funktion ausgeführt.