Question

我的网站上有一张桌子。我想让用户可以轻松地为每一行添加注释。

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

这是一个例子：

<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/

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

所以我的问题是：

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

我想在每一行都有一个小图标，我可以打开popover并将一个id传递给popover以加载动态内容。

希望有人有个主意。

感谢

Answer 1

您可以在弹出链接（例如data-target）中添加其他属性，该链接将指向您要显示为内容的元素。

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

示例：

// 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 popover只有一次适用于多个职位

1 个答案: