Wie JavaScript-Funktionen wechseln jquery mit

Question

Ich habe zwei JavaScript-Funktionen

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 
}); 

Wie kann ich dies erreichen, können Sie jemand auf diesem helfen?

Answer 1

Sie durch die Anwendung Klasse auf die Taste und schreiben, hängt von der Klasse tun können

Live Demo

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

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

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

Answer 2

Sie könnte die Bindung

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

Um dies zu erreichen, ändern Sie eine Flagge speichern könnte, die den Zustand des Elements speichert und damit die Anruffunktion zu. Hier ist ein Beispiel, das eine Klasse verwendet:

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

Sie binden könnte/unbind Event-Handler bei jedem aufeinanderfolgenden Klick, aber das wird schnell unhandlich und ein Schmerz zu halten.

Aus Gründen der Vollständigkeit, hier ist ein Beispiel, das stattdessen ein data Attribut verwendet:

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

Answer 4

Sie eine boolesche Variable (true) und setzen Sie sich auf false verwenden könnte die erste fonction nach dem Aufruf. Dann, falls falsch, rufe den zweiten auf und setze die boolsche Variable erneut (auf wahr).

Answer 5

Verwenden Sie .data(), um eine Variable für das Element selbst festzulegen, das angibt, welche Funktion aufgerufen werden soll.

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>