CSSプロパティを使用して要素の背景を変更する
-
05-07-2019 - |
質問
背景のあるdivがあり、クリック時に背景の位置を変更したい。
これは私のjQueryスニペットです:
$('#sprite').click(function() {
$(this).css('backgroundPosition','-40px');
});
これで問題ありませんが、「2回」クリックして元の位置に戻り、すべてリセットします。
うーん、これは「コールバック」と呼ばれるものですか?
それを試してみましたが、うまくいきませんでした:
$('#sprite').click(function() {
$(this).css('backgroundPosition','-40px');
},
function() {
$(this).css('backgroundPosition','40px');
}
);
情報をお寄せいただきありがとうございます。
解決
" toggle"の使用を検討する必要があります。この機能... 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");
});
他のヒント
クラスで実行します。はるかに簡単です。
<style type="text/css">
#spite.moved { background-position: -40px; }
</style>
<script type="text/javascript">
$(function() {
$("#spite").click(function() {
$(this).toggleClass("moved");
});
});
</script>
コールバックの概念を誤解しています。プログラミングにおけるコールバックは、実行中のコードの直後に呼び出される関数です。
あなたの場合、あなたは次のように言っています:
クリックして、背景の位置を-40pxに設定します。それが完了したら、40pxに設定します(関数が実行したことをすぐに元に戻します)。
この場合、コールバック関数を使用する必要はありません。ユーザーが要素をクリックすると、1つの関数が実行されるようにトグルを設定する必要があります...次にその要素をクリックすると、2番目の関数が実行されます。
所属していません StackOverflow