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");

除了标题和内容函数返回不同的文本外，还有另一个按钮执行基本相同的javascript。

请注意，它们都在同一元素上定义弹出框，只是内容不同。

问题是，一旦点击任一按钮并执行了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

此示例取自lnked页面：

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）以查看如何在以后使用它！

使用Twitter的Bootstrap时，如何更改popover的内容？

3 个答案: