twitter-bootstrap - Bootstrap 弹出窗口，图像作为内容

Question

我正在尝试这样做:

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

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

为什么我这样做，我在 data-content 属性中与模板和 html 发生了冲突。因此，我将图像源放在 data-img 属性中，并喜欢抓取它并将其放入 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