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缩短为一行，在单击传递的对象后，它是jQuery的ID，然后执行click动作？问一下，因为我的jQuery最终会出现大约20条这样的行，我认为只用其中的一行就可以解决所有问题。

Answer 1

您在此处尝试遵循的模式称为“不要重复自己”或“干燥”。

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

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

Answer 2

$('.button-group').on('click', function(){
 $('#btn'+$(this).attr('id')).click();
})

尝试一下...

Answer 3

我会这样做（ES6）

$(".button-group").click(function() {
  $(`#btn${this.id} SpotfireControl`).click();}
);



$("SpotfireControl").click(function() {
  alert(`id: ${this.id}`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<table>
  <tr>
    <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>
  </tr>
</table>

或者使用VanillaJS

document.body.addEventListener('click', (e) => {
  if (e.target.classList.contains('button-group')) {
    const evt = new Event("click", {bubbles: true});
    document
      .getElementById(`btn${e.target.id}`)
      .getElementsByTagName('SPOTFIRECONTROL')[0]
      .dispatchEvent(evt);
    e.stopPropagation();
  }
  if (e.target.tagName.toUpperCase() === 'SPOTFIRECONTROL') {
    alert(`id: ${e.target.id}`);
  }
})

<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>

<table>
  <tr>
    <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>
  </tr>
</table>

寻找一种方法来“参数化” .click（）在jQuery中

3 个答案: