javascript - 如何在带有多个按钮的 Twitter Popover 中使用 "div"？

Question

此解决方案适用于一键式案例:Is it possible to use a div as content for Twitter's Popover

但是在我的页面中我有一堆弹出窗口(比如 50-100)。
所以我需要修改这个解决方案。

这是@jävi 的解决方案:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

我的每个按钮都有自己的 ID。

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
  <div>This is your div content</div>
</div>

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
  <div>This is your div content</div>
</div>

那么我该如何重写这个 javascript 代码片段来覆盖我所有的按钮呢？

Answer 1

我自己也曾为此奋斗过。您需要将 id 放在触发弹出窗口的元素中。使用像这样的自定义数据属性(称为“data-id”):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>

然后您可以稍微修改您的 javascript 以编程方式获取 data-id 属性值:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $($(this).attr('data-id')).html();
    }
  });
});