4

ポップオーバーで設定されている要素に基づいてコンテキストコンテンツを表示するようにブートストラップポップオーバーを取得しようとしています。

マークアップの例を次に示します。

<div class="user">
    <img src="foo.jpg" />
</div>
<div class="userInfo">
    <p>He likes pie!</p>
</div>

<div class="user">
    <img src="bar.jpg" />
</div>
<div class="userInfo">
    <p>He likes cake!</p>
</div>

ポップオーバーを設定するためのスクリプト：

$('.user').popover({
    trigger: 'hover',
    placement: 'top',
    html: true,
    content: //What goes here?  I want to display the contents of the userInfo class
});

userクラスにカーソルを合わせると、兄弟または子userInfoクラスに含まれるコンテンツを表示するポップオーバーが表示されると予想されます。

私のマークアップは柔軟にすることができます。userInfoクラスを子供、兄弟、親などに移動できます。

4

2 に答える 2

13

ええ、私はの.userInfo中に入れて.user、それから繰り返して$('.user')、それぞれのコンテンツを.user別々に設定します（あなたの例では、すべてのポップオーバーに同じコンテンツを設定しています。

例：

<div class="user">
  user 1
  <div class="userInfo">
    <p>He likes pie!</p>
  </div>
</div>

<div class="user">
  user 2
  <div class="userInfo">
    <p>He likes cake!</p>
  </div>
</div>

Javascript：

$('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.find('.userInfo').html()  
  });
});

これが動作中のjsfiddleです（いくつかのcssが追加されています）：http： //jsfiddle.net/hajpoj/CTyyk/5/

于 2013-01-10T22:01:26.707 に答える
0

彼の元のマークアップを残して、これを使用できます。

$('.user').each(function() {
  var $this = $(this);
  $this.popover({
    trigger: 'hover',
    placement: 'right',
    html: true,
    content: $this.next().html()  
  });
});
于 2017-12-21T16:23:44.717 に答える