Bootstrap 多个位置仅弹出一次

Question

我的网站上有一个 table。我想让用户可以轻松地向每一行添加评论。

为此，我在互联网上找到了一个漂亮的评论视图。

这里有一个例子：

<div class="popover-markup">
  <a href="#" class="trigger btn btn-default" data-placement="right">Popover link</a>
  <div class="content hide">
    code
  </div>

</div>


$('.popover-markup>.trigger').popover({
  html: true,
  title: function() {
    return $(this).parent().find('.head').html();
  },
  content: function() {
    return $(this).parent().find('.content').html();
  }
});

http://jsfiddle.net/dzr521qs/424/

这基本上正是我想要的。但是...我需要评论视图中的一个表单，以便将 post 数据发送到我的服务器。由于我在 table 中有大约 50-300 个条目，如果我必须为每一行的弹出窗口放置代码，它将生成大量代码。

所以我的问题是：

是否可以定义一次弹出窗口并始终显示相同的弹出窗口但每一行的内容不同？

我想在每一行上都有一个小图标，我可以通过它打开弹出窗口并为弹出窗口提供一个 id 以加载动态内容。

希望有人有想法。

谢谢

Answer 1

您可以向弹出窗口添加额外的属性 link（比如 data-target），它将指向您想要显示为内容的元素。

您可以在 content() 回调中提取 data 属性值，并使用它来显示不同的内容。

示例：

// inside popover(...)
content: function() {
    var contentSelector = $(this).data("target");
    if (contentSelector && $(contentSelector).length > 0) {
        return $(contentSelector).html();
    } else {
        return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>";
    }
}

// in your trigger add `data-target` attribute
<a ... data-target=".content">...

这是一个 updated fiddle 演示该解决方案

Bootstrap 多个位置仅弹出一次

Bootstrap popover only one time for multiple positions

javascript

jquery

twitter-bootstrap

popover