web-dev-qa-db-ja.com

Bootstrap popover、コンテンツとしての画像

私はこれをしようとしています：

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

誰かが私を助けてくれることを願っています:)

twitter-bootstrappopover
32
Roy

現在のところ、thisは現在のスコープを参照していますが、Popoverインスタンスがアタッチされている要素を参照する必要があります。これは、単純に関数のcontentの式をラップすることで実行されます。

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

デモを見る：

Plunker

62
merv

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ではなくテキストとして解釈されます

7
Siobhan

これを試して

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

1
Soesanto Salim