При использовании Twitter Bootstrap, как я могу изменить контент поповера? - PullRequest
12 голосов
/ 05 октября 2011

Я использую функцию всплывающего окна из Twitter Bootstrap js. У меня есть кнопка, которая при нажатии запускает этот 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, за исключением того, что функции title и content возвращают разный текст.

Обратите внимание, что они оба определяют popover для одного и того же элемента, только с разным содержанием.

Проблема в том, что после нажатия любой кнопки и выполнения js никакие последующие нажатия другой кнопки не изменят содержимое всплывающего окна. Так как после инициализации поповера, как я могу обновить / изменить содержимое?

Ответы [ 3 ]

17 голосов
/ 10 октября 2011

Цель атрибута title состоит в том, чтобы принять значение типа function, которое предоставляет именно эту функциональность.

например: если вы установите свой заголовок на:

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

и у вас есть,

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

, вы будете продолжать получать другое название для вашего поповера.Вы можете изменить логику randomText для динамического извлечения заголовка.

6 голосов
/ 03 августа 2012

Вы можете сделать это, непосредственно обращаясь к данным экземпляра popover, как описано здесь:
https://github.com/twbs/bootstrap/issues/813

Этот пример взят со страницы lnked:

var myPopover = $('#element').data('popover')
myPopover.options.someOption = 'foo'
0 голосов
/ 30 декабря 2015

Вот решение, которое я тут же сказал:

Всплывающее содержимое начальной загрузки не может изменяться динамически

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

popover - это объект, если вы хотите узнать о нем больше, попробуйте сделать console.log (popover) после его определения, чтобы увидеть, как вы можете использовать его после!

...