一個按鈕一個功能第一次點擊另一個第二個

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。

更新：如果你想保持第二處理活着然後用on像this one更換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

你可以在這兩個函數的類添加到您的按鈕，讓你知道該按鈕應該做的事，然後測試，如果按鈕具有此類與否。 當然，你也將需要刪除viewMenu（）類，這將是這樣的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

你也可以指定一個名稱爲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>