클릭 명령을 한 번 사용한 다음 비활성화합니다.

Question

다음은 내가하려는 일입니다. 프롬프트 0에 두 개의 버튼이 있습니다. 예 또는 아니오입니다. 예를 클릭하면 상자가 왼쪽으로 이동하여 페이드 아웃되고 프롬 프 트 1이 표시됩니다. 아니요를 클릭하면 상자가 오른쪽으로 이동하고 프롬프트 2가 표시됩니다. Z- 색인을 사용하여 어떤 프롬프트가 최상위에 있어야하는지 알려줍니다. 이제 예를 클릭하면 프롬프트 1로 이동하고 예 또는 아니오 버튼이있는 영역을 클릭하면 아무 것도 나타나지 않습니다. 모두 괜찮습니다.

아니요를 클릭하면 페이드 아웃됩니다 (왼쪽으로 이동하지 않지만 주된 관심사는 아닙니다). 프롬프트 2로 이동합니다. 그러나 영역을 클릭하면 (예는 보이지 않음) 예, 그것은 프롬프트 1로 이동합니다. 두 스크립트에서 바인딩 해제 시도했지만 시도가 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 프롬프트 0

감사

$(document).ready(function() { 
    $('.appIMG1').one('click.appIMG1',function() { 
     $(this).unbind('click'); 
     $("#app1").animate({ 
      left: '250px', 
      opacity:0 
     }); 
     $("#app2").fadeIn('slow'); 
    }); 
}); 


$(document).ready(function() { 
    $(".appIMG2").one('click.appIMG2', function() { 
     $(this).unbind('click'); 
     $("#app1").animate({ 
      right: '250px', 
      opacity:0 
     }); 
     $("#app3").fadeIn("slow"); 
    }); 
}); 

Z 인덱스 1 메시지 2 메시지에 대해 각각 8, 9이며, 10이다.

Answer 1

클릭 한 항목뿐만 아니라 모든 항목에서 클릭 이벤트를 바인딩 해제해야합니다. 대신 $(this).unbind('click')를 사용하여, 당신은 다음과 같이 클릭 가능한 모든 요소에서 바인딩을 해제해야합니다 (이것은 단지 2 버튼을 사용하여 예이지만, 모두 수행해야 할 것입니다) :

$(".appIMG2").one('click.appIMG2', function() { 
    $('.appIMG1, .appIMG2').unbind('click'); 
    $("#app1").animate({ 
     right: '250px', 
     opacity:0 
    }); 
    $("#app3").fadeIn("slow"); 
    }); 
});