如何将图像动态插入引导弹出框

Question

我想使用弹出框来显示产品图片。知道如何正确从data-img属性中抓取图像吗？谢谢。

<a href='#' class='toggle-popover' title='Hello World' data-img='http://www.google.com/intl/en_ALL/images/srpr/logo11w.png' data-trigger='focus' data-toggle='popover'>Product Name</a>

$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: '',
trigger: 'hover',
content: '<div class="row">' +
'<div class="col-sm-12 text-center ">' +
'<div class="content3">' +
'<div class="pt-3"><img src="' + $(this).data('img') + '"/></div>' +
'</div>' +
'</div>' +
'</div>',
html: true
});
});

$(this).data('img')显示为undefined.

Answer 1

您可以使用.each()使用当前上下文迭代和设置弹出框content，即this

$('[data-toggle="popover"]').each(function(){
$(this).popover({
title: '',
trigger: 'hover',
content: '<div class="row">' +
'<div class="col-sm-12 text-center ">' +
'<div class="content3">' +
'<div class="pt-3"><img src="' + $(this).data('img') + '"/></div>' +
'</div>' +
'</div>' +
'</div>',
html: true
})
});