Multiple toggle functions on one element
I recently deadline forced me to make a change to the jQuery core to
fix an issue I was having. Now that I'm refactoring the code, I'd like
to know if I've missed something obvious, or if there's a better way
to do it. I couldn't find any reference to this issue on the forums or
bug tracker.
<div id="btnClose" class="icon">Close</div>
$(".icon").toggle(
function(){ $(this).removeClass('two2').addClass('two1') },
function(){ $(this).removeClass('two1').addClass('two2') }
);
$("#btnClose").toggle(
function(){ $(this).removeClass('one2 one3').addClass('one1'); },
function(){ $(this).removeClass('one1 one3').addClass('one2'); },
function(){ $(this).removeClass('one1 one2').addClass('one3'); }
);
This doesn't work with jQuery (stable or nightly), as internally the
current toggle state is stored on the DOM node itself as "lastToggle"
and so increments multiple times per click.
I had to modify the return statement of the toggle function so that I
could use the proxy guid as part of the counter identifier:
var proxy = jQuery.event.proxy( fn, function(event) {
// Figure out which function to execute
this[ 'lastToggle' + proxy.guid ] = ( this[ 'lastToggle' +
proxy.guid ] || 0 ) % i;
// Make sure that clicks stop
event.preventDefault();
// and execute the function
return args[ this[ 'lastToggle' + proxy.guid ]++ ].apply( this,
arguments ) || false;
})
return this.click( proxy );
Which appears to work perfectly (and got me through my deadline ;) but
I'm sure isn't the most elegant way to do it. Am I even supposed to be
able to add multiple toggle event handlers?
Thanks!
Earle