twitter-bootstrap - 如何使用 Bootstrap 弹出框显示同级或子元素的内容？

Question

我试图让 Bootstrap 弹出窗口根据弹出窗口设置的元素显示上下文内容。

这是一些示例标记:

<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 上时的预期结果类将显示一个弹出窗口，显示兄弟或 child 中包含的内容 userInfo类(class)。

我的标记可以灵活；我可以移动 userInfo类是 child ， sibling ， parent 等。

Answer 1

是的，我会把 .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/