변화하는 요소의 배경을 사용하여 CSS 시설

Question

가 div 배경으로,그리고 나는 같은 배경을 변경하려면의 위치를 클릭합니다.

이것은 내 jQuery snippet:

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

이 작업 확인하고 싶고,원래의 위치로 돌아왔는'두 번째'클릭합 재설정,니다.

Mmm,이것이 무엇이라고 하는'콜백'오른쪽?

했으로 그렇게는 하지만 그것은 작동하지 않았:

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

감사에 대한 모든 정보.

Answer 1

사용하는 것을 고려해 보아야 합니다"전환"기능에 대한 이...그것은 당신이 갈 수 있도록 사이에는 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(즉시 사항을 어떤 기능을 했).

이 경우에,당신은 당신을 사용할 필요가 없 콜백 함수입니다.당신은 설정할 필요가 전환되도록 이용자가에 당신의 요소 중 하나는 기능을 실행한 다음 다음을 클릭하는 요소,두 번째 함수를 실행합니다.