하나의 버튼 하나를 두 번째로 처음 클릭 할 때 하나의 기능

Question

하나의 버튼에서 두 개의 jquery 기능을 수행하고 싶습니다. 하나는 첫 번째 클릭 후 다른 하나는 두 번째 클릭에 대한 것입니다. 다음은 두 개의 버튼 코드입니다. 함수를 결합하는 방법이 있습니까? 이 같은

<input type="button" value="View Page" onclick="ViewPage()" /> 

<script type="text/javascript"> 
function ViewPage() { 
example_animate('-=50%'); 
$("#mainContent").toggle(); 
} 
</script> 

<input type="button" value="View Menu" onclick="ViewMenu()" /> 

<script type="text/javascript"> 
function ViewMenu() { 
example_animate('+=50%'); 
$("#mainContent").toggle(); 
} 
</script> 

Answer 1

보십시오 뭔가 - DEMO가

var action = 1; 

$("input").on("click", viewSomething); 

function viewSomething() { 
    if (action == 1) { 
     $("body").css("background", "honeydew"); 
     action = 2; 
    } else { 
     $("body").css("background", "beige"); 
     action = 1; 
    } 
} 

따라서 귀하의 경우는 one 방법을 사용하여

function viewSomething() { 
    if (action == 1) { 
     example_animate('-=50%'); 
     action = 2; 
    } else { 
     example_animate('+=50%'); 
     action = 1; 
    } 
    $("#mainContent").toggle(); 
} 

Answer 2

또 다른 방법이 될 것입니다, 모두 실행됩니다 번만

$("input").one("click", viewSomething); 
function viewSomething() 
{ 
    $("body").css("background", "honeydew"); 
    $("input").one("click", function(){ // on can be used 
     $("body").css("background", "beige"); 
    }); 
} 

DEMO.

업데이트 : 당신이 살아 번째 처리기를 유지하려면 다음 this one 같은 on으로 one를 교체합니다.

Answer 3

배열을 사용하여 함수를 저장하고 카운터를 data과 함께 사용하여 인덱스를 추적 할 수 있습니다. 이것은 매우 유연합니다. 원하는만큼 많은 함수를 추가 할 수 있고 계속 클릭하면 반복됩니다.

데모 : 버튼이 클래스가 있거나없는 경우이 두 기능에 다음 테스트 버튼이 무엇을해야하는지 알 수 있도록 귀하의 버튼에 클래스를 추가 할 수http://jsbin.com/ehatoj/2/edit

var funcs = [ 
    function one() { alert('one'); }, 
    function two() { alert('two'); }, 
    function three() { alert('three'); } 
]; 

$('button') 
    .data('counter', 0) // begin counter at zero 
    .click(function() { 
    var counter = $(this).data('counter'); 
    funcs[ counter ](); 
    $(this).data('counter', counter < funcs.length-1 ? ++counter : 0); 
    }); 

Answer 4

. 물론 당신은 또한의 jQuery v1.8.3이 같을 것이다 viewMenu()에서 클래스를 제거해야합니다 .. 또한 HTML 요소에 이름을 지정할 수 있습니다

<input id="toggle-view" type="button" value="View Menu" class="view-page" /> 

$('#toggle-view').on('click', function() 
{ 
    var button = $(this); 

    if (button.hasClass('view-page') ) 
    { 
     ViewPage(); 
     button.removeClass('view-page'); 
    } 
    else 
    { 
     ViewMenu(); 
     button.addClass('view-page'); 
    } 
}); 

Answer 5

을

<input type="button" value="Click me" onclick = 'viewSomething(this)'/>   
<script> 
    function viewSomething(e){ 

     //First time click 
     if(e.name != 'Click'){ 
      e.name = "Click"; 
      <!--do whatever..--> 
     }//end if 

     //When click it again.. 
     else if(e.name == 'Click'){ 
      e.name = "Unclick"; 
      <!--do whatever--> 
     }//end else 
    }//end function 
</script>