2011-10-05 11 views
12

私はTwitterのBootstrap jsのpopover機能を使用しています。私がクリックされた、ボタンがあり、このJavaScriptを実行します。Twitterのブートストラップを使用する場合、どのようにポップオーバーのコンテンツを変更できますか?

$("#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が初期化されたら、どのようにコンテンツを更新/変更できますか?

答えて

16

title属性の目的は、この非常に機能性を提供するタイプfunctionの値を受け入れることです。例えば

:あなたがあなたのタイトルを設定した場合:

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

、あなたが持っている、

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

あなたのポップオーバーのために別のタイトルを取得し続けます。 randomTextのロジックを変更して、タイトルを動的に取得することができます。

+1

ポップオーバーを再初期化するのではなく、title/content属性に別の関数を割り当てるだけでいいですか? – brentmc79

6

あなたはとして直接ポップオーバーインスタンスのデータにアクセスすることによって、ここで説明することを行うことができます。
は、この例では、lnkedページから取得され https://github.com/twbs/bootstrap/issues/813

:ここ

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

私は右が言ったソリューションです。

Bootstrap popover content cannot changed dynamically

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

popoverあなたがそれについてもっと知りたければ、それを定義した後にconsole.log(popover)を使ってみてください。

関連する問題