如何在Twitter的Popover中使用“div”和多個按鈕？

Question

這個解決方案適用於一個按鈕的情況： 是否可以使用div作為Twitter的Popover的內容

但在我的頁面中，我有一堆彈出窗口（比如說50-100）。
所以我需要修改這個解決方案。

這是wa @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();
    }
  });
});

Answer 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屬性名稱！）

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

Answer 4

將包含popover html的div的id存儲在a元素的rel屬性中

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

然后在你的點擊監聽器中獲取click錨點的rel（不知道popover方法如何存儲它，但我確信它確實如此）：

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

Answer 5

對我而言，它確實如此

data-id="#popover_div1" 

在按鈕的HTML中（用＃表示div的id）。