twitter-bootstrap 使用 Twitter 的 Bootstrap 时,如何更改弹出框的内容?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7664051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 16:17:43  来源:igfitidea点击:

When using Twitter's Bootstrap, how can I change a popover's content?

javascripttwitter-bootstrappopover

提问by brentmc79

I'm using the popover feature from Twitter's Bootstrap js. I have a button that, when clicked, executes this javascript:

我正在使用 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");

There's also another button that executes basically the same javascript, except that the title and content functions return different text.

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

Note that they both define the popover on the same element, just with different content.

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

The problem is, once either button is clicked and the js is executed, no subsequent clicks from the other button will change the popover content. So once the popover is initialized, how can I update/change the content?

问题是,一旦单击任一按钮并执行 js,其他按钮的后续单击都不会更改弹出窗口的内容。因此,一旦初始化弹出框,我该如何更新/更改内容?

回答by anirvan

the purpose of the titleattribute is to accept a value of type functionwhich provides this very functionality.

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

for example: if you set your title to:

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

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

and you have,

你有,

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

you will keep getting a different title for your popover. It is upto you to change the logic of randomTextto fetch a title dynamically.

您将继续为您的弹出框获得不同的标题。您可以更改randomText动态获取标题的逻辑。

回答by Paull

You can do that by accessing popover instance data directly as explained here:
https://github.com/twbs/bootstrap/issues/813

您可以通过直接访问 popover 实例数据来做到这一点,如下所述:https:
//github.com/twbs/bootstrap/issues/813

This example is taken from the lnked page:

此示例取自 lnked 页面:

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

回答by Yann Chabot

Here is the solution I said right there:

这是我在那里说的解决方案:

Bootstrap popover content cannot changed dynamically

Bootstrap 弹出框内容不能动态更改

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

popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !

popover 是一个对象,如果您想了解更多信息,请尝试在定义它之后执行 console.log(popover) 以查看之后如何使用它!