Динамически создаваемое всплывающее окно с кнопками

#javascript #html #jquery #bootstrap-4

#javascript #HTML #jquery #bootstrap-4

Вопрос:

Обычно я являюсь серверным разработчиком; но для этого я знаю, что меня поймали на том, что я не работаю с тем, как работает веб-браузер.

Я оставил предупреждение JavaScript там для простоты использования. в зависимости от того, на какую кнопку вы нажали во всплывающем окне, оно должно всплыть и сказать leave-X или office-x, где X — идентификатор, частью которого была кнопка.

Но все они говорят «оставить-1» или «офис-1», независимо от того, какое поле я выбираю. Я знаю, что извлекаю правильные данные из правильного поля, так как при изменении «1» на «foo» будет отображаться office-foo.

Я бы предпочел не иметь отдельного пользовательского всплывающего окна для каждой ячейки таблицы, поскольку это были бы сотни записей в конечном продукте.

Мой базовый код таблицы 2×2 и jQuery / bootstrap:

 <div class="container">
  <table class="table table-striped">
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
    <tr>
      <td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="1" class="td-Office">1</td>
      <td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="2" class="td-Office">2</td>
    </tr>
    <tr>
      <td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="3" class="td-Office">3</td>
      <td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="4" class="td-Office">4</td>
    </tr>
  </table>
</div>




var parentClass = $("[data-toggle=popover]").attr('id');
$("[data-toggle=popover]").popover({html: true, content: `<div id="popover-content">
    <button id="office-`  parentClass  `" class="btn btn-sm btn-Office" onclick="toggleTD(this);">Office</button>
    <button id="leave-`  parentClass  `" class="btn btn-sm btn-Leave" onclick="toggleTD(this);">Leave</button>
  </div>`});

$('.popover-dismiss').popover({
  trigger: 'focus'
}) 
function toggleTD(elm) {
    alert(elm.id);
}

1. Попробуйте поиграть с этим jsfiddle.net/J7nDz/48 и посмотрите, не загорятся ли какие-нибудь лампочки.

2. Это работает для вас? jsfiddle.net/J7nDz/48

3. Это похоже на метод грубой силы, который я бы предпочел не делать. Как уже упоминалось, в конечном итоге потребуются сотни всплывающих окон. Я знаю, что где-то в этом есть решение: jqueryscript.net/menu /. … но я ни за что на свете не смогу этого понять.

Ответ №1:

Проблема в том, что значение ParentClass всегда равно «1»;

Если вы хотите использовать идентификатор кнопки, замените содержимое функцией и используйте this.id:

 $("[data-toggle=popover]").popover({
   html: true, 
   content: function() { 
      return `<div id="popover-content">
               <button id="office-`  this.id  `" class="btn btn-sm btn-Office" onclick="toggleTD(this);">Office</button>
               <button id="leave-`  this.id  `" class="btn btn-sm btn-Leave" onclick="toggleTD(this);">Leave</button>
            </div>`
   }
 });