un pulsante una funzione al primo clic un'altra al secondo

Question

Vorrei un pulsante per eseguire due funzioni jQuery. Uno al primo clic e l'altro al secondo clic. Ecco il codice per i due pulsanti. C'è un modo per combinare le funzioni?

<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

provare qualcosa di simile - 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; 
    } 
} 

Quindi nel tuo caso sarà

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

Answer 2

Un altro modo con one metodo, entrambi saranno attiva una sola volta

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

DEMO.

Aggiornamento: Se si vuole mantenere in vita il secondo gestore quindi sostituire one con on come this one.

Answer 3

È possibile utilizzare un array per memorizzare le proprie funzioni e un contatore con data per tenere traccia dell'indice. Questo è molto flessibile perché puoi aggiungere tutte le funzioni che vuoi e verrà ripetuto se continui a fare clic.

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

Si potrebbe aggiungere una classe al pulsante in modo da sapere ciò che il pulsante dovrebbe fare, e poi di prova in entrambe le funzioni, se il pulsante ha questa classe oppure no. Naturalmente sarà anche necessario rimuovere la classe in viewMenu(), che sarebbe simile a questa in jQuery v1.8.3:

<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

È inoltre possibile assegnare un nome ad elemento HTML ..

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