如何使用jQuery切換JavaScript功能

Question

我有兩個JavaScript函數

 function A(){ 
   alert("A() function is called");
 }

function B(){
    alert("B() function is called");
 }

 $("#button").click(function(){
 // I need to toggle A() and B() here
 });

我如何實現這一目標，請問有人可以幫忙嗎？

Answer 1

為此，您可以存儲一個標志，該標志存儲元素的狀態，從而存儲要調用的函數。 這是一個使用類的示例：

$("#button").click(function(){
    var $el = $(this).toggleClass('foo');
    $el.hasClass('foo') ? A() : B();
});

您可以在每次連續的單擊上綁定/解除綁定事件處理程序，但這很快變得笨拙並且難以維護。

為了完整起見，下面是一個使用data屬性的示例：

$("#button").click(function(){
    var $el = $(this).data('foo', !$(this).data('foo'));
    $el.data('foo') ? A() : B();
});

Answer 2

您可以更改綁定

function A(){ 
   alert("A() function is called");
   $("#button").off("click", A).on("click", B);
 }

function B(){
   alert("A() function is called");
   $("#button").off("click", B).on("click", A);
 }

 $("#button").on("click", A);

Answer 3

您可以使用布爾變量（true）並在調用第一個函數后將其設置為false。 然后，如果為false，則調用第二個變量，並再次設置布爾變量（為true）。

Answer 4

使用.data()在元素本身上設置一個變量，該變量告訴您​​要調用的函數。

 function A() { alert("A() function is called"); } function B() { alert("B() function is called"); } $("#button").click(function() { if ($(this).data('AorB') == 'B') { B(); $(this).data('AorB', 'A'); } else { A(); $(this).data('AorB', 'B'); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button">click me</button> 

Answer 5

您可以通過將類應用於按鈕並根據類來編寫

現場演示

 <input type="button" class="callA" value="click me" id="button" />

 $("#button").click(function(){

   if($(this).hasClass('callA')){
           A();
    }
   else
    {
          B();
    }
 });