Jquery - 一个简单的函数可以处理 16 个不同的按钮被点击？

Question

我正在为一个网站创建一个交互式颜色采样器，其中有 16 个不同的样本，单击这些样本可以显示全尺寸预览。

使用 jQuery，我有一个函数 show_preview(swatch_id) ，它可以完成所有良好的视觉效果。然而，要调用该函数，我目前只能重复 16 个类似的处理程序:

<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');
}
...

我一直在阅读这个主题，包括 Stack Overflow 上的内容，并修改了另一个答案中的一些代码。那么如果我要做这样的事情，它仍然会高效运行吗(如果有的话!)？

<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);
}

谢谢

菲尔

Answer 1

好吧，你几乎猜对了。

我会这样做:

<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>