twitter-bootstrap Bootstrap 弹出框，图像作为内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13604144/
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
Bootstrap popover, image as content
提问by Roy
I'm trying to this:
我正在尝试这样做：
$("a[rel=popover]").popover({
html: true,
trigger: 'hover',
content: '<img src="'+$(this).data('img')+'" />'
});
but it doesn't work because the $(this).data('img') doesn't work.
但它不起作用，因为 $(this).data('img') 不起作用。
Why I do this, I've got conflicts with templating and html in the data-content attribute. So I place the image source in a data-img attribue and like to grab that en place it into a img element.
为什么我这样做，我在 data-content 属性中与模板和 html 有冲突。因此，我将图像源放在 data-img 属性中，并喜欢抓取它并将其放入 img 元素中。
I've tried this, but works not fully:
我试过这个，但工作不完全：
$("a[rel=popover_img]").popover({
html: true,
trigger: 'hover',
content: '<img src="#" id="popover_img" />'
}).hover(function(){
$('#popover_img').attr('src',$(this).data('img'));
});
I hope somebody can help me out :)
我希望有人可以帮助我:)
回答by merv
As it currently stands your thisis referencing the current scope, whereas you want to be referencing the element which the Popover instance is attached to. This is done simply by wrapping the expression you have for contentin a function:
就目前而言，您this正在引用当前范围，而您希望引用 Popover 实例所附加的元素。这只需将您的表达式包装content在一个函数中即可完成：
$('a[rel=popover]').popover({
html: true,
trigger: 'hover',
content: function () {
return '<img src="'+$(this).data('img') + '" />';
}
});
See demo:
见演示：
Plunker
普朗克
回答by Siobhan
An alternative to what merv proposed, for simplicity you can embed a lot of the jquery properties to the html and leave the jquery lightweighted e.g
merv 建议的替代方案，为简单起见，您可以将许多 jquery 属性嵌入到 html 中，并使 jquery 保持轻量级，例如
<a href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<img src='http://localhost:15249/img1.jpg' width='200' />">Toggle popover</a>
and call the popover via jquery
并通过 jquery 调用 popover
$('["popover"]').popover()
Points to note when using this approach, the data-html should be set to true, else the image is not interpreted as html but as text
使用这种方法时需要注意的地方，data-html应该设置为true，否则图像不会被解释为html而是文本
回答by Soesanto Salim
try this
试试这个
[html]
[html]
<a href="#"><i class="menu-icon fa fa-picture-o fa-3x" data-rel="popover" title="<strong>Hi, I'm Popover</strong>" data-placement="top" data-content="<img src='https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' width=50% height=50%>"></i></a>
[javascript]
[javascript]
$(document).ready(function() {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover"
});
})
})
[check this out] https://jsfiddle.net/j4qptkzr/20/
