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则调用第二个并再次设置布尔变量（为真）。

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

你可以通过将类应用于按钮来执行，并且写入取决于类

Live Demo

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

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

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

如何使用jquery切换javascript函数

5 个答案: