Question

I have a function that takes one argument:

function magic(el){
 ...
}

I have a bunch of click handlers on mixed elements/classes calling function:

$('#div1').click(function(){ magic('#other-div'); });
$('.crazy-div').click(function(){ magic('.mystery-div'); });
$('#doomed-divv').click(function(){ magic('#shady-div'); });
$('#secret-div').click(function(){ magic('form'); });
$('#div2').click(function(){ magic('p'); });
...

Is there a nice way to consolidate these down? Perhaps with an associative array?

Answer 1

It’s enough to create an object containing a key-value asignment (what ID to be passed as an argument when a specific ID is clicked) and then use $.each to iterate through the keys and asign a click function for each of them.

var a = {
   '#div1' : '#other-div',
   '#doomed-divv' : '#shady-div'
};
$.each(a,function(key,value){
    $(key).click(function(){
        magic(value);
    });
});​

JSfiddle.