При использовании Twitter Bootstrap, как я могу изменить содержимое popover?
Я использую функцию popover из 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, за исключением того, что функции заголовка и содержимого возвращают другой текст.
Обратите внимание, что оба они определяют popover на одном и том же элементе, только с другим контентом.
Проблема заключается в том, что после нажатия любой кнопки и выполнения js последующие клики с другой кнопки не изменят содержимое popover. Итак, как только popover инициализируется, как я могу обновить/изменить контент?
Ответы
Ответ 1
целью атрибута title
является принятие значения типа function
, которое обеспечивает эту самую функциональность.
например: если вы задали свой заголовок:
title: function() { return randomTxt(); }
и у вас есть
function randomTxt()
{
arr = ['blah blah', 'meh', 'another one'];
return arr[Math.floor(Math.random() * 4)];
}
вы будете получать другой заголовок для своего popover. Вы должны изменить логику randomText
для динамического выбора заголовка.
Ответ 2
Вы можете сделать это, обратившись к данным экземпляра popover непосредственно, как описано здесь:
https://github.com/twbs/bootstrap/issues/813
Этот пример берется из страницы lnked:
var myPopover = $('#element').data('popover')
myPopover.options.someOption = 'foo'
Ответ 3
Вот решение, которое я сказал прямо здесь:
Загрузочный контент Bootstrap не может динамически изменяться
var popover = $('#exemple').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";
popover - это объект, если вы хотите узнать больше об этом, попробуйте сделать console.log(popover) после того, как вы определите его, чтобы узнать, как вы можете его использовать после!