引导程序弹出窗口，图像作为内容 [英] Bootstrap popover, image as content

问题描述

我正在尝试:

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

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

but it doesn't work because the $(this).data('img') doesn't work.

为什么要这样做，我与data-content属性中的模板和html发生冲突.因此，我将图像源放置在data-img属性中，并希望将其捕获到img元素中.

Why I do this, I've got conflicts with templating and html in the data-content attribute. So I place the image source in a data-img attribue and like to grab that en place it into a img element.

我已经尝试过了，但是不能完全起作用:

I've tried this, but works not fully:

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

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

I hope somebody can help me out :)

推荐答案

按照目前的情况，您的this引用了当前作用域，而您想引用Popover实例附加到的元素.只需将content的表达式包装在函数中即可完成

As it currently stands your this is referencing the current scope, whereas you want to be referencing the element which the Popover instance is attached to. This is done simply by wrapping the expression you have for content in a function:

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

请参阅演示

这篇关于引导程序弹出窗口，图像作为内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！