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

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 に答える