tek tuşla bir işlev ilk önce başka bir tuşa tıklayın

Question

Bir düğmenin iki jquery işlevi gerçekleştirmesini istiyorum. Birincisi ilk tıklamada diğeri ikinci tıklamada. İşte iki düğmenin kodu. Fonksiyonları birleştirmenin bir yolu var mı? Böyle

<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

deneyin şey - 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; 
    } 
} 

Yani sizin durumda o one yöntemi kullanılarak

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

Answer 2

bir başka yolu olacak, hem ateş edeceği sadece bir kez

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

DEMO.

Güncelleme: hayatta ikinci işleyicisi tutmak istiyorsanız sonra this one gibi on ile one değiştirin.

Answer 3

Dizininizi izlemek için işlevlerinizi ve data numaralı bir sayacı saklamak için bir dizi kullanabilirsiniz. Bu çok esnektir, çünkü istediğiniz kadar çok işlev ekleyebilir ve tıklamaya devam ederseniz döngüde katabilirsiniz.

Demosu: düğme bu sınıfa sahip olmadığını her iki fonksiyonlarda sonra testi düğmenin ne yapması gerektiğini öğrenmesi için düğmeye için bir sınıf eklemek ve olabilirhttp://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

. Tabii ayrıca jQuery v1.8.3 içinde şu şekilde görünecektir viewMenu() sınıfı, kaldırmak gerekir: .. Ayrıca html elemanına bir isim atayabilirsiniz

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