如何在 Twitter 的 Popover 中使用带有多个按钮的“div”？答案

【问题标题】：How can I use "div" in Twitter's Popover with multiple buttons?如何在 Twitter 的 Popover 中使用带有多个按钮的“div”？
【发布时间】：2012-07-06 03:16:44
【问题描述】：

此解决方案适用于一键式情况：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代码sn-p来覆盖我所有的按钮呢？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap popover

【解决方案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();
    }
  });
});

【讨论】：

【解决方案2】：

如果您不想用另一个 data-* 属性污染源元素，这里有一种简单而通用的方法，可以将 data-content 属性用作文本或 CSS 选择器：

$('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
        var content = $(this).data('content');
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content;
    }
});

您现在可以将data-content 属性与文本值一起使用：

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>

...或者使用带有 CSS 选择器值的 data-content 属性：

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

您可以在此处测试此解决方案：http://jsfiddle.net/almeidap/eX2qd/

...或者在这里，如果您使用的是 Bootstrap 3.0：http://jsfiddle.net/almeidap/UvEQd/（注意 data-content-target 属性名称！）

【讨论】：

【解决方案3】：

您可以在没有其他按钮属性的情况下这样做：

http://jsfiddle.net/isherwood/E5Ly5/

.popper-content {
    display: none;
}

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.pop-content').html();
    }
});

【讨论】：

【解决方案4】：

将包含popover html的div的id存储在a元素的rel属性中

<a rel="popover_div2" ... >click</a>

然后在单击侦听器中获取单击锚点的 rel（不确定 popover 方法如何存储它，但我确定它确实如此）：

var myRel = $(this).attr(rel);
return $(myRel).html();

【讨论】：

【解决方案5】：

对我来说确实是

data-id="#popover_div1"

在按钮的 HTML 中（带有 # 用于寻址 div 的 id）。

【讨论】：