jquery - 在 jquery 中寻找 "parametrize".click() 的方法

Question

由于我远不是 jquery 新手(我接管了一堆代码，现在需要一种方法来弄清楚它是如何工作以及如何改进它)，我有以下代码:

jQuery:

$("#button1").click(function() {$("#btnbutton1:first-child").click();});
$("#button2").click(function() {$("#btnbutton2:first-child").click();});
$("#button3").click(function() {$("#btnbutton3:first-child").click();});

HTML:

<DIV class=hiddenButtons>
<div id="btnbutton1"><SpotfireControl id="2e21a4f7e5794ad98b0048672462a290" /></div>
<div id="btnbutton2"><SpotfireControl id="0f8b33874ec64a4285721f11b42373db" /></div>
<div id="btnbutton3"><SpotfireControl id="0ae43a8ccc784fa192dbc360431a912f" /></div>
</DIV>
[....]
        <td id="button1" class="button-group active">Label1</td>
        <td id="button2" class="button-group">Label2</td>
        <td id="button3" class="button-group">Label3</td>
[....]

我想要实现的是一种将 jquery 优化为与此类似的一行的方法:

$("#"+param).click(function() {$("#btn"+param+":first-child").click();});

换句话说:有没有一种方法可以将此 jQuery 缩短为一行，在单击对象后将其 id 传递给 jQuery，然后执行单击操作？询问我的 jQuery 最终会得到大约 20 行这样的行，我认为只用一行来解决所有这些行会更清楚。

Answer 1

您在这里尝试遵循的模式被称为“不要重复自己”或“DRY”。

要实现此目的，您可以使用 td 元素上的通用类对它们进行分组，并使用 data 属性向每个元素添加一些自定义元数据，以更改点击事件行为。像这样的事情:

<div class="hiddenButtons">
  <div id="btnbutton1">
    <SpotfireControl id="2e21a4f7e5794ad98b0048672462a290" />
  </div>
  <div id="btnbutton2">
    <SpotfireControl id="0f8b33874ec64a4285721f11b42373db" />
  </div>
  <div id="btnbutton3">
    <SpotfireControl id="0ae43a8ccc784fa192dbc360431a912f" />
  </div>
</div>

<td class="button-group active" data-target="#btnButton1">Label1</td>
<td class="button-group" data-target="#btnButton2">Label2</td>
<td class="button-group" data-target="#btnButton2">Label3</td>

$(".button-group").click(function() {
  var selector = $(this).data('target');
  $(selector).find(':first-child').trigger('click');
});