반복 함수가있는 jQuery 구문 문제

Question

다음 코드를 실행하는 방법에 대한 간단한 조언을 찾고 있습니다.

내가 필요한 것은 # p12-1이라고하는 버튼입니다 (클릭하면) 일부 기능이 실행됩니다. 다시 클릭하면 몇 가지 기능이 추가로 실행됩니다. 나는 이것이 어떤 클릭인지를 계산하기위한 변수가 필요할 것이라고 추측하고 있지만 확실하지는 않습니다. 제 HTML/jQuery를 찾으십시오.

$section == (parseInt(1)); 

$("#p12-1").click(function() { 
    if ($section == 1) { 
     var $section = (parseInt(currentValue) + 1);   
     //Example Function 
       $("#p12-2").fadeOut(1000); 
     //End example function 
    }; 
    if ($section == 2) { 
     var $section = (parseInt(currentValue) + 1); 
     //Example Function 
       $("#p12-2").fadeOut(1000); 
     //End example function    
    }; 
    if ($section == 3) { 
     var $section = (parseInt(currentValue) + 1); 
     //Example Function 
       $("#p12-2").fadeOut(1000); 
     //End example function    
    }; 
    if ($section == 4) { 
     var $section = (parseInt(currentValue) + 1); 
     //Example Function 
       $("#p12-2").fadeOut(1000); 
     //End example function       
    }; 
}); 

     <div class="main-slide main-slide-12" style="display:none;"> 
      <div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div> 
      <div style="display:block;" id="p12-2"><img src="images/p12-2.png" /></div> 
      <div style="display:block;" id="p12-3"><img src="images/p12-3.png" /></div> 
      <div style="display:none;" id="p12-4"><img src="images/p12-4.png" /></div> 
      <div style="display:none;" id="p12-5"><img src="images/p12-5.png" /></div> 
      <div style="display:none;" id="p12-6"><img src="images/p12-6.png" /></div> 
      <div style="display:none;" id="p12-7"><img src="images/p12-7.png" /></div> 
      <div style="display:none;" id="p12-8"><img src="images/p12-8.png" /></div> 
      <div style="display:none;" id="p12-9"><img src="images/p12-9.png" /></div> 
      <div style="display:none;" id="p12-10"><img src="images/p12-10.png" /></div> 
      <div style="display:none;" id="p12-11"><img src="images/p12-11.png" /></div> 
      <div style="display:none;" id="p12-12"><img src="images/p12-12.png" /></div> 
     </div>    

다음 코드가 작동하지 않는 것 같습니다. 어떻게 해결할 수 있습니까?

Answer 1

$section = 1을 이벤트 바인딩 외부에 선언하십시오. 그러나 바운드 이벤트 내부에서 다시 선언하십시오 var $section = (parseInt(currentValue) + 1); 이것은 변수를 로컬 범위로 재 선언합니다. 이것을 많이 단순화 할 수 있습니다.

var $section = 1; 
$("#p12-1").click(function() { 
    $section++; //increment section 
    if ($section == 1) { 
    //do some stuff 
    } 
    if ($section == 2) {} 
}); 

정말로이 방법을 사용하려면 if 대신 switch 문을 사용하는 것이 좋습니다.