ein Knopf eine Funktion auf den ersten Klick einen anderen auf den zweiten

Question

Ich möchte, dass ein Knopf zwei jquery Funktionen durchführt. Einer beim ersten Klick, dann der andere beim zweiten Klick. Hier ist der Code für die zwei Tasten. Gibt es eine Möglichkeit, die Funktionen zu kombinieren?

<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

Versuche so etwas wie diese - 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; 
    } 
} 

Also in Ihrem Fall wird es

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

Answer 2

Eine weitere Möglichkeit, mit one Methode sein, werden beide feuern nur einmal

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

DEMO.

Update: Wenn Sie den zweiten Handler am Leben halten wollen, dann ersetzen one mit on wie this one.

Answer 3

Sie könnten ein Array verwenden, um Ihre Funktionen zu speichern, und einen Zähler mit data, um den Index zu verfolgen. Dies ist sehr flexibel, da Sie so viele Funktionen hinzufügen können, wie Sie möchten, und es wird eine Schleife bilden, wenn Sie weiter klicken.

Demo: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

Sie könnten eine Klasse Ihre Schaltfläche hinzufügen, damit Sie wissen, was die Schaltfläche tun soll, und dann Test in beiden Funktionen, wenn die Taste, um diese Klasse hat oder nicht. Natürlich müssen Sie auch die Klasse in ViewMenu() entfernen, die wie folgt in jQuery v1.8.3 aussehen:

<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

Sie auch einen Namen ..

<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> 

zu html-Element zuordnen