33

我正在尝试这样做：

$("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'));
});

我希望有人可以帮助我:)

4

3 回答 3

65

就目前而言，您this正在引用当前范围，而您希望引用 Popover 实例附加到的元素。这只需将您拥有的表达式包装content在一个函数中即可完成：

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

见演示：

普朗克

于 2012-11-28T18:42:09.037 回答
12

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()

使用这种方式的注意点，data-html应该设置为true，否则图片不会被解释为html而是文本

于 2016-01-05T22:41:15.250 回答
2

试试这个

[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/

于 2018-02-21T21:37:24.547 回答