twitter-bootstrap – 如何使用bootstrap popover显示兄弟元素或

发布时间：2020-12-17 20:39:49 所属栏目：安全来源：网络整理

导读：我试图让bootstrap popover显示基于使用popover设置的元素的上下文内容. 这是一些示例标记： div class="user" img src="foo.jpg" //divdiv class="userInfo" pHe likes pie!/p/divdiv class="user" img src="bar.jpg" //divdiv class="userInfo" pHe likes

我试图让bootstrap popover显示基于使用popover设置的元素的上下文内容.

这是一些示例标记：

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

设置popover的脚本：

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

将鼠标悬停在用户类上时的预期结果是显示一个弹出框,显示兄弟或子userInfo类中包含的内容.

我的标记可以灵活;我可以将userInfo类移动为子节点,兄弟节点,父节点等.

解决方法

是的,我将.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',content: $this.find('.userInfo').html()  
  });
});

这是一个工作的jsfiddle(添加一些额外的CSS)：
http://jsfiddle.net/hajpoj/CTyyk/5/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!