CSSをクリックして次回のクリックで再度変更する

Question

私は答えを見回してくれて、何も役に立たない。 divをクリックして背景を変更したい場合は、divの次のクリックで再び変更したいと思っています。最初の部分は機能しますが、私は2番目の部分のやり方を理解できません。

これは（jQueryのを使用して）どのような作品です：

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

すべてのヘルプは、おかげでいただければ幸いです。

Answer 1

よりもむしろ.cssのメソッドを使用し、私は.toggleClassを使用することをお勧めし、クラスに関連するCSSを置く：

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

クラス定義：

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

.toggleClassメソッドが追加されますクラスが存在しない場合はクラス、そうであればクラスを削除します。

Answer 2

あなたはcssクラスを使用してそれを切り替える必要があります。

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

$(document).ready(function(){ 

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

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

    }); 
}); 

Answer 3

私は.toggleClass()を使用するには、アーティスト同士のコラボレーションに同意しますが、これを試してみてください.css()を使用する場合：

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