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

Question

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

这是一些示例标记：

<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班级移动为孩子、兄弟姐妹、父母等。

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/

Answer 2

您可以保留他的原始标记并使用它：

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