Ищете способ "параметризировать" .click() в jquery

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

jquery

28.03.2019 12:01

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

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

28.03.2019 12:05

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

Попробуй это...

Вы можете заменить $(this).attr('id') просто this.id

— 28.03.2019 12:24

28.03.2019 12:06

Я бы сделал так (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>

28.03.2019 12:23

Другие вопросы по теме

Отправка объекта ajax на контроллер не работает

Как перенаправить на другую страницу в JS/jQuery после отправки формы?

Как нажать на полноэкранный проигрыватель vimeo на готовом документе?

JS/JQuery и iframe

Обработка на стороне сервера Пагинация таблиц данных Microsoft SQL

Как проверить объект в javascript

Как я могу сделать нагрузку на прокрутку таблицы с помощью JS или JQuery?

Необходимо включить HTML-код в файл JS

Сделать изображение кликабельным и по клику открыть соответствующий текстовый файл в новом окне

Как проверить число или отмеченные флажки при загрузке?

Ищете способ "параметризировать" .click() в jquery

Ответы 3

Другие вопросы по теме

Похожие вопросы