Question

我正在尝试这个：

$("a[rel=popover]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="'+$(this).data('img')+'" />'
});

但它不起作用，因为$（this）.data（'img'）不起作用。

为什么我这样做，我在数据内容属性中与模板和html发生冲突。所以我将图像源放在data-img attribue中，并且喜欢把它放到img元素中。

我试过这个，但并不完全：

$("a[rel=popover_img]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="#" id="popover_img" />'
}).hover(function(){
    $('#popover_img').attr('src',$(this).data('img'));
});

我希望有人可以帮助我：）

Answer 1

目前，您的this引用了当前作用域，而您希望引用Popover实例附加到的元素。只需将content的表达式包装在函数中即可完成此操作：

$('a[rel=popover]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).data('img') + '" />';
  }
});

参见演示：

Plunker

Answer 2

作为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>

并通过jquery

调用popover

$('["popover"]').popover()

使用此方法时要注意的事项，data-html应设置为true，否则图像不会被解释为html而是文本

Answer 3

试试这个

[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的]

$(document).ready(function() {
$('[data-rel=popover]').popover({
  html: true,
  trigger: "hover"
});

}）

[看看这个] https://jsfiddle.net/j4qptkzr/20/

Bootstrap popover，图像作为内容

3 个答案:

Plunker