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

这种解决方案适用于一个按钮的情况：Is it possible to use a div as content for Twitter's Popover 如何在多个按钮的Twitter Popover中使用“div”？

但在我的网页中，我有一堆popovers（比如50-100）。
所以我需要修改这个解决方案。

这娃@哈维的解决方案：

$(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代码片段来覆盖我所有的按钮？

来源

2012-07-05 trante

存储包含一个元素

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

然后的rel属性里面的酥料饼的HTML的div id来获取点击锚的相对点击监听器内（不知道怎么酥料饼的方法商店它，但我确信它的确如此）：

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

来源

2012-07-05 17:12:16

只是为了自己而战。您需要将id放入触发popover的元素中。使用像这样（被称为“数据ID”）的自定义数据属性：

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

然后你就可以稍微修改JavaScript以编程方式获取数据-id属性值：

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

来源

2012-07-25 22:39:31

工作..谢谢 – Parag 2015-01-22 10:05:25

对于我来说，有做

data-id="#popover_div1"

在按钮的HTML（带＃为寻址div的id）。

来源

2013-03-03 11:01:29 Bruno

如果你不想与其他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>

...或使用data-content属性与CSS选择器值：

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

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

来源

2013-05-19 18:57:03 almeidap

你可以不用额外的按钮属性是这样的：

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(); 
    } 
});

来源

2014-02-07 21:50:26 isherwood

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

回答

相关问题