Как динамически вставлять изображения в Bootstrap Popover

Question

Я хочу использовать popover, чтобы показывать изображения продуктов. Любая идея, как я могу получить изображение из атрибута 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
  })
});