Question

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.

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

<div id="#swatch_clicker_1>
<div id="#swatch_clicker_2>


$("#swatch_clicker_1").click(function() 
{
    show_preview('1');
}   
$("#swatch_clicker_2").click(function() 
{
    show_preview('2');
}
...

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!)?

<div class="swatch_clicker" id="#swatch_clicker_1>
<div class="swatch_clicker" id="#swatch_clicker_2>


$(".swatch_clicker").click(function(event)
{
    var clicker_id=event.target.id;
    show_preview(clicker_id);
}

Thanks,

Phil

Answer 1

Well you almost have it right.

Here’s how I would do it:

<div class="swatch_clicker" data-preview-number="1"></div>
<div class="swatch_clicker" data-preview-number="2"></div>

<script>
    $(".swatch_clicker").click(function() {
        show_preview( $(this).data('preview-number') );
    });
</script>