Toggle Between 2 Functions [duplicate]

Question

This question already has an answer here:

• jQuery click / toggle between two functions 9 answers

I'm trying to make a toggle function, so when you click a link it does one thing and when you click the same link again it does another thing. My problem comes is that I'm using the latest version of Jquery and it seems that toggle-event is Deprecated.

I was trying to work with this before I found it was deprecated.

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

It says in the docs that it's already binded to click.

Answer 1

A micro jQuery plugin:

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

Taken from my answer here https://stackoverflow.com/a/21520499/383904

---

There's other ways to toggle a state / value:

LIVE DEMO

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

where instead of the modulo operator % you can use the
Bitwise XOR operator ^ like: [c^=1]

---

Using Array.reverse()
LIVE DEMO

var editAdd = [editList, addList];

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

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

reverse will invert our array on every click, all we need to do is take the 0 indexed value [0] and run that function name [0]().

Answer 2

All you need to do is have a variable, or an attribute, to indicate what function to run, for example, using the custom data-switch attribute:

$('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 Fiddle demo.

Answer 3

short and clean

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

Answer 4

Not elegant, but quick fix:

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

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

Answer 5

See my answer on this here

This solution creates a toggle function that composes two functions that alternate between the two every time it is called.

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

apply it with

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