2011-10-05 11 views
12

Używam funkcji popover z Bootstrap js na Twitterze. Mam przycisk, który po kliknięciu, uruchamia ten skrypt:Podczas korzystania z Bootstrap na Twitterze, jak mogę zmienić zawartość Popover?

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

Jest też inny przycisk, który uruchamia w zasadzie ten sam skrypt, chyba że funkcje tytuł i treść powrócić inny tekst.

Należy pamiętać, że oba definiują popover na tym samym elemencie, tylko z inną zawartością.

Problem polega na tym, że po kliknięciu dowolnego przycisku i wykonaniu polecenia js żadne kolejne kliknięcia z drugiego przycisku nie zmieniają zawartości popover. Więc kiedy inicjalizacja zostanie zainicjowana, jak mogę zaktualizować/zmienić zawartość?

Odpowiedz

16

celem atrybutu title jest zaakceptowanie wartości typu function, która zapewnia tę funkcję.

na przykład: jeśli ustawisz tytuł:

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

i masz,

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

będziecie zachowywać coraz inny tytuł dla popover. To Ty musisz zmienić logikę randomText, aby dynamicznie pobrać tytuł.

+1

Więc zamiast ponownie inicjować popover, powinienem po prostu przypisać inną funkcję do atrybutów tytułu/treści? – brentmc79

6

Można to zrobić poprzez dostęp do danych instancji popover bezpośrednio jak wyjaśniono tutaj:
https://github.com/twbs/bootstrap/issues/813

Ten przykład pochodzi z lnked stronie:

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

Oto rozwiązanie Powiedziałem tam:

Bootstrap popover content cannot changed dynamically

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

popover to obiekt, jeśli chcesz dowiedzieć się więcej na ten temat, spróbuj zrobić konsolę.log (popover) po zdefiniowaniu, aby zobaczyć, jak możesz z niego korzystać po!

Powiązane problemy