twitter-bootstrap 我可以获得 twitter bootstrap popover 的当前状态吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13184375/
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
Can I get the current state of a twitter bootstrap popover?
提问by user1216398
I currently call a script to dynamically add content to my popover but I don't need to make this call when a user clicks again to close it. Is it possible to get the state and close it when it's visible?
我目前调用一个脚本来动态地将内容添加到我的弹出窗口，但是当用户再次单击以关闭它时，我不需要进行此调用。是否可以获取状态并在它可见时关闭它？
This is what I have so far:
这是我到目前为止：
$('.knownissue').on('click', function() {
var info = $(this).attr('id').substr(5).split(':');
var el = $(this);
// How do I check to see if the popover is visible
// so I can simply close it and exit?
$.post('functions/get_known_issues.php?tcid='+info[0]+'&tcdate=' + info[1], function(data) {
if (data.st) {
el.attr('data-content', data.issue);
el.popover('toggle');
}
}, "json");
});
回答by Will Madden
To avoid searching for dynamically inserted markup you can do this:
为了避免搜索动态插入的标记，您可以这样做：
In Bootstrap 2:
在引导程序 2 中：
var $element = $('.element-you-added-popup-to')
$element.data().popover.tip().hasClass('in')
// Or if you used '.tooltip()' instead of '.popover()'
$element.data().tooltip.tip().hasClass('in')
In Bootstrap 3:
在 Bootstrap 3 中：
$element.data()['bs.popover'].tip().hasClass('in')
$element.data()['bs.tooltip'].tip().hasClass('in')
回答by Yohn
if($('.popover').hasClass('in')){
// popover is visable
} else {
// popover is not visable
}
回答by Muhammad Abubakr
the hidden and shown events are available in bootstrap popover as default.
默认情况下，隐藏和显示的事件在引导弹出窗口中可用。
$('#myPopover').on('shown.bs.popover', function () {
// do something…
})The Following events for bootstrap popover are available
bootstrap popover 的以下事件可用
show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popoverPlease Refer to docs bootstrap popoversfor more details
有关更多详细信息，请参阅文档引导弹出窗口
回答by jbiWeisendorf
For Bootstrap 4.x
对于 Bootstrap 4.x
$('a#aUeberschriftenJBi').click(function() {
if ($('a#aUeberschriftenJBi').attr('aria-describedby')) {
// popover is visable
} else {
// popover is not visable
$('a#aUeberschriftenJBi').popover({
placement: 'bottom',
title: function() {
return "Title";
},
content: function() {
return "Content";
}
});
}
$('a#aUeberschriftenJBi').popover("show");
});
HTML
HTML
<a href="#" id="aUeberschriftenJBi" title=""><span><i class="fa fa-sticky-note"></i></span></a>
回答by Greg Jennings
Bootstrap adds and removes the markup for the popover dynamically, so you just need to check for the existence of the element.
Bootstrap 动态添加和删除弹出框的标记，因此您只需要检查该元素是否存在。
If you go to the Bootstrap example page: http://twitter.github.com/bootstrap/javascript.html#popovers, you can toggle their example popover with the large red button displayed there that says "Click to toggle popover"
如果您转到 Bootstrap 示例页面：http: //twitter.github.com/bootstrap/javascript.html#popovers，您可以使用显示在那里的大红色按钮切换他们的示例弹出框，上面写着“单击以切换弹出框”
This jquery selector is written to select that popover element if it exists $('#popovers').find('h3').eq(5).next().find('.popover')
如果存在 $('#popovers').find('h3').eq(5).next().find('.popover')，则编写此 jquery 选择器以选择该 popover 元素
To check it's state (exists or not), check if the length of returned element set is 0.
要检查它的状态（存在与否），请检查返回元素集的长度是否为 0。
So push the button to toggle their popover example, then run the following in the console:
所以按下按钮来切换他们的弹出窗口示例，然后在控制台中运行以下命令：
TOGGLE POPOVER ON
打开弹出窗口
console.log(
$('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // false
TOGGLE POPOVER OFF
关闭弹出窗口
console.log(
$('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // true
PS - Hopefully you'll write a better selector since you already know you're going to need to check the popover exists on the page or not
PS - 希望你会写一个更好的选择器，因为你已经知道你需要检查页面上是否存在弹出框
EDIT : link to jsfiddle HERE
