javascript - 在 2 个函数之间切换

Question

我正在尝试做一个切换功能，所以当你点击一个链接时它会做一件事，而当你再次点击同一个链接时它会做另一件事。我的问题是我使用的是最新版本的 Jquery，并且似乎 toggle-event 已弃用。

在发现它已被弃用之前，我一直在尝试使用它。

$('#edit a').toggle(
     function(){
        editList();
    },
     function(){
        addList();
});

它在文档中说它已经绑定到点击。

Answer 1

一个微型 jQuery 插件：

jQuery.fn.clickToggle = function(a,b) {
  var ab = [b,a];
  return this.on("click", function(){ ab[this._tog^=1].call(this); });
};


// USE LIKE:

$("button").clickToggle(function() {   
     console.log("AAA");
}, function() {
     console.log("BBB");
}); // Chain here other jQuery methods to your selector

取自我在这里的回答https://stackoverflow.com/a/21520499/383904

---

还有其他方法可以切换状态/值：

现场演示

var editAdd = [editList, addList],  // store your function names into array
    c = 0;                          // toggle counter

function editList(){                // define function
   alert('EDIT');
}
function addList(){                 // define function
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd[c++%2]();                 // toggle array index and use as function
                                    // % = Modulo operator
});

%您可以使用
按位 XOR 运算符 代替模运算符，^例如：[c^=1]

---

使用 Array.reverse()
现场演示

var editAdd = [editList, addList];

function editList(){
   alert('EDIT');
}
function addList(){
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd.reverse()[0]();
});

reverse 将在每次单击时反转我们的数组，我们需要做的就是获取 0 索引值[0]并运行该函数 name [0]()。

Answer 2

您需要做的就是有一个变量或一个属性来指示要运行的函数，例如，使用自定义data-switch属性：

$('a').click(function(e){
    e.preventDefault();
    var that = $(this);
    switch (that.data('switch')){
        case 'a':
            // do something in situation 'a'
            console.log('Function one');
            that.data('switch','b');
            break;
        case 'b':
            // do something in situation 'b'
            console.log('Function two');
            that.data('switch','a');
            break;
    }
});

JS 小提琴演示。

Answer 3

短而干净

var toggle = [addList, editList];
$('#edit a').click({
  var state = +$(this).data('toggle');
  toggle[state]();
  $(this).data('toggle',(1-state));
  return false;
});

Answer 4

在这里查看我对此的回答

此解决方案创建了一个切换函数，该函数由两个函数组成，每次调用时都会在两者之间交替。

var toggle = function (a, b) {
    var togg = false;
    return function () {
        // passes return value back to caller
        return (togg = !togg) ? a() : b();
    };
};

应用它

$('#btn').on('click', toggle (function (){
    return editList();
}, function (){
    return addList();
}));

Answer 5

不优雅，但快速修复：

$('#edit a').click({
  if($(this).data('toggleState') == 1) {
    toggleState = 0;
    addList();
  }
  else {
    toggleState = 1;
    editList();
  }

  $(this).data('toggleState', toggleState);
  return false;
});