Ändern Sie CSS beim Klicken und wieder beim nächsten Klick

Question

Ich habe nach einer Antwort gesucht und nichts funktioniert für mich. Ich möchte in der Lage sein, auf ein div zu klicken und den Hintergrund ändern zu lassen, dann beim nächsten Klick des div möchte ich es wieder zurück ändern. Der erste Teil funktioniert, aber ich kann nicht herausfinden, wie man den zweiten Teil macht.

Dies ist, was funktioniert (mit jQuery):

$(document).ready(function(){ 
$('.button').click(function() { 
$('.icon').css("background-position", "0px 0px"); 
}); 
}); 

Jede Hilfe würde geschätzt, danke.

Answer 1

Anstatt die CSS-Methode zu verwenden, empfehle ich .toggleClass und setzen die entsprechende CSS in eine Klasse:

$('.icon').toggleClass('myClass'); 

Klassendefinition:

.myClass { background-position: 0px 0px }; 

Die .toggleClass Methode hinzufügen die Klasse, wenn sie nicht bereits vorhanden ist, oder sie entfernen, wenn sie es ist.

Answer 2

Sie sollten eine CSS-Klasse verwenden und sie umschalten.

.zero{ 
    background-position: "0px 0px"; 
} 

$(document).ready(function(){ 

    $('.button').click(function() { 

      $('.icon').toggleClass("zero") 

    }); 
}); 

Answer 3

ich mit recomendations einverstanden .toggleClass() zu verwenden, aber wenn Sie verwenden möchten .css() versuchen Sie dies:

$(document).ready(function(){ 
    $('.icon').each(function(){ 
    $(this).data('default-bg-pos', $(this).css('background-position')); 
    $(this).data('state', 0); 
    }); 
    $('.button').click(function() { 
    $('.icon').each(function(){ 
     if ($(this).data('state')) { 
     $(this).data('state', 0); 
     $(this).css('background-position', $(this).data('default-bg-pos')); 
     } else { 
     $(this).data('state', 1); 
     $(this).css("background-position", "0px 0px"); 
     } 
    }); 
    }); 
});