Jquery - One simple function to handle 16 different buttons being clicked?
<p>I am creating an interactive colour sampler for a web site, which has 16 different swatches which can be clicked to show the fullsize preview.</p>

<p>Using jQuery I have a function <code>show_preview(swatch_id)</code> which does all the good visual stuff. However to call that function, I am currently stuck with repeating 16 similar handlers:</p>

<pre><code>&lt;div id="#swatch_clicker_1&gt;
&lt;div id="#swatch_clicker_2&gt;


$("#swatch_clicker_1").click(function() 
{
    show_preview('1');
}   
$("#swatch_clicker_2").click(function() 
{
    show_preview('2');
}
...
</code></pre>

<p>I've been reading round the subject, including here on Stack Overflow and modified a little code from another answer. So If I were to do something like this, would it still run efficiently (if at-all!)?</p>

<pre><code>&lt;div class="swatch_clicker" id="#swatch_clicker_1&gt;
&lt;div class="swatch_clicker" id="#swatch_clicker_2&gt;


$(".swatch_clicker").click(function(event)
{
    var clicker_id=event.target.id;
    show_preview(clicker_id);
}
</code></pre>

<p>Thanks,</p>

<p>Phil</p>
