Блог

Поскольку я далек даже от того, чтобы быть новичком в 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, а затем выполняет действие click? Спрашиваю, поскольку в моем jQuery в конечном итоге будет около ~ 20 таких строк, и я подумал, что будет понятнее иметь только одну, чтобы решить их все.

Шаблон, которому вы пытаетесь следовать здесь, известен как «Не повторяйтесь» или «DRY».

Для достижения этой цели вы можете использовать общие классы для 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');
});
  

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

Попробуйте это…

Я бы сделал это следующим образом (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>