2

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

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

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

これが正常に機能している間に、「2回目」のクリックで元の位置に戻り、すべてをリセットしたいと思います。

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

私はそれでそうしようとしましたが、うまくいきませんでした：

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

3 に答える 3

9

これには「トグル」関数の使用を検討する必要があります...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");
});
于 2009-07-29T15:16:48.023 に答える
3

クラスでそれを行います。それははるかに簡単です。

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

<script type="text/javascript">
    $(function () {
        $("#spite").click(function () {
            $(this).toggleClass("moved");
        });
    });
</script>
于 2009-07-29T15:16:53.343 に答える
3

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

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

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

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

于 2009-07-29T15:18:42.607 に答える