CSSプロパティを使用して要素の背景を変更する

Question

背景のあるdivがあり、クリック時に背景の位置を変更したい。

これは私のjQueryスニペットです：

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

これで問題ありませんが、「2回」クリックして元の位置に戻り、すべてリセットします。

うーん、これは「コールバック」と呼ばれるものですか？

それを試してみましたが、うまくいきませんでした：

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

情報をお寄せいただきありがとうございます。

Answer 1

＆quot; toggle＆quot;の使用を検討する必要があります。この機能... 2つの異なるCSSクラス間を移動できます...このチュートリアルをご覧くださいこちら。

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

CSSプロパティを直接設定するのではなく、別のオプションとして、背景用のCSSクラスを作成し、そのクラスを切り替えるだけです。

CSS

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

jQuery

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

Answer 2

クラスで実行します。はるかに簡単です。

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

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

Answer 3

コールバックの概念を誤解しています。プログラミングにおけるコールバックは、実行中のコードの直後に呼び出される関数です。

あなたの場合、あなたは次のように言っています：

クリックして、背景の位置を-40pxに設定します。それが完了したら、40pxに設定します（関数が実行したことをすぐに元に戻します）。

この場合、コールバック関数を使用する必要はありません。ユーザーが要素をクリックすると、1つの関数が実行されるようにトグルを設定する必要があります...次にその要素をクリックすると、2番目の関数が実行されます。