如何使用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();
    }
 });