Bootstrap popover,图像作为内容

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而是文本