Javascript 动态创建带有按钮的popover

我通常是后端开发人员；但为此，我知道我被困在了网络浏览器如何工作的范围之外

为了便于使用，我将JavaScript警报留在了那里。根据您在popover中单击的按钮，它应该弹出并显示leave-X或office-X，其中X是按钮所属的ID

但不管我选择哪个领域，他们都会说“离开1号”或“办公室1号”。我知道我正在从正确的字段中提取正确的数据，因为将“1”更改为“foo”，它将显示office foo

我不希望每个表单元都有单独的定制popover，因为最终产品中将有数百个条目

我的基本2x2表和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列
第2列
1.
2.
3.
4.
var parentClass=$（“[data toggle=popover]”）。attr（'id'）；
$（“[data toggle=popover]”）。popover（{html:true，内容：`
办公室
离开
`});
$（'.popover'）.popover({
触发器：“焦点”
}) 
功能切换（elm）{
警报（elm.id）；
}

问题在于父类值始终为“1”

如果要使用按钮id，请将内容替换为函数，然后使用此。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>`
   }
 });

$（“[data toggle=popover]”。popover({
是的，
内容：函数（）{
返回`
办公室
离开
`
}
});

试着玩一下这个，看看是否有灯泡打开。这个对你有用吗？这看起来像是一个蛮力的方法，我不想这样做。如前所述，它最终将需要数百个爆米花。我知道这里面有一个解决方案：。但我一辈子都想不出来。太好了！我知道这将是一件简单的事情，而这件事我很乐意帮忙！；）