If you want your own chainable clickToggle jQuery Method you can do it like:
jQuery.fn.clickToggle = function(a, b) {_x000D_
return this.on("click", function(ev) { [b, a][this.$_io ^= 1].call(this, ev) })_x000D_
};_x000D_
_x000D_
// TEST:_x000D_
$('button').clickToggle(function(ev) {_x000D_
$(this).text("B"); _x000D_
}, function(ev) {_x000D_
$(this).text("A");_x000D_
});
_x000D_
<button>A</button>_x000D_
<button>A</button>_x000D_
<button>A</button>_x000D_
_x000D_
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
_x000D_
function a(){ console.log('a'); }
function b(){ console.log('b'); }
$("selector").click(function() {
return (this.tog = !this.tog) ? a() : b();
});
If you want it even shorter (why would one, right?!) you can use the Bitwise XOR *Docs operator like:
DEMO
return (this.tog^=1) ? a() : b();
That's all.
The trick is to set to the this
Object a boolean
property tog
, and toggle it using negation (tog = !tog
)
and put the needed function calls
in a Conditional Operator ?:
In OP's example (even with multiple elements) could look like:
function a(el){ $(el).animate({width: 260}, 1500); }
function b(el){ $(el).animate({width: 30}, 1500); }
$("selector").click(function() {
var el = this;
return (el.t = !el.t) ? a(el) : b(el);
});
ALSO: You can also store-toggle like:
DEMO:
$("selector").click(function() {
$(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
});
but it was not the OP's exact request for he's looking for a way to have two separate operations / functions
Note: this will not store the current Toggle state but just inverse our functions positions in Array (It has it's uses...)
You simply store your a,b functions inside an array, onclick you simply reverse the array order and execute the array[1]
function:
function a(){ console.log("a"); }
function b(){ console.log("b"); }
var ab = [a,b];
$("selector").click(function(){
ab.reverse()[1](); // Reverse and Execute! // >> "a","b","a","b"...
});
Create a nice function toggleAB()
that will contain your two functions, put them in Array, and at the end of the array you simply execute the function [0 // 1
] respectively depending on the tog
property that's passed to the function from the this
reference:
function toggleAB(){
var el = this; // `this` is the "button" Element Obj reference`
return [
function() { console.log("b"); },
function() { console.log("a"); }
][el.tog^=1]();
}
$("selector").click( toggleAB );