使用Twitter的Bootstrap时，如何更改弹出窗口的内容？

Question

我正在使用Twitter的Bootstrap js中的popover功能。我有一个按钮，当点击它时，就会执行这个javascript：

$("#popover_anchor").popover({trigger: "manual",
                              placement: "below",
                              offset: 10,
                              html: true,
                              title: function(){return "TITLE";},
                              content: function(){return "CONTENT TEXT";}});
$("#popover_anchor").popover("show");

除了title和content函数返回不同的文本之外，还有另一个按钮可以执行基本上相同的javascript。

请注意，它们都定义了同一元素上的popover，只是内容不同。

问题是，一旦两个按钮中的任何一个被单击并执行js，其他按钮的后续单击都不会改变弹出内容。那么，一旦popover被初始化，我如何更新/更改内容呢？

Answer 1

title属性的目的是接受function类型的值，该类型的值提供了此功能。

例如:如果您将标题设置为：

 title: function() { return randomTxt(); }

你已经做到了，

function randomTxt()
{
    arr = ['blah blah', 'meh', 'another one'];
    return arr[Math.floor(Math.random() * 4)];
}

您将不断获得一个不同的标题为您的popover。由您决定是否更改randomText的逻辑以动态获取标题。

Answer 2

您可以通过直接访问popover实例数据来完成此操作，如下所述：

https://github.com/twbs/bootstrap/issues/813

此示例取自链接页面：

var myPopover = $('#element').data('popover')
myPopover.options.someOption = 'foo'

Answer 3

下面是我在这里提到的解决方案：

Bootstrap popover content cannot changed dynamically

var popover = $('#exemple').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";

popover是一个对象，如果你想更多的了解它，在你定义它之后尝试做console.log(popover)，看看以后如何使用它！