Question

我有一个foreach循环加载页面上的帖子，所以我有一个动态的帖子量。每个帖子都有一个弹出框来显示喜欢帖子的用户。

这是我的问题：

让我们说用户 A 和 B 就像帖子 1

用户 C 和 D ，例如发帖 2

当我点击帖子 2 上的相似内容时，我看到用户 A 和 B 。我应该看到用户 C 和 D 。事实上，我在页面上的每个帖子上看到用户 A 和 B 。

I've made a fiddle to demonstrate this problem。所有弹出窗口都显示测试1 ，这是不正确的。只有第一个应该显示测试1 。

有谁知道为什么会这样，以及如何解决？

<div class="container">
  <h1>Pop-Over Test</h1>
  <a href="#" class="popover-test" id ="test1" rel="popover">Hover for popover</a>
    <div class="popover-list-content" style="display:none;">
        <ul>
            <li>
                Test 1
            </li>
        </ul>
    </div>

    <br>

    <a href="#" class="popover-test" id ="test2" rel="popover">Hover for popover</a>
    <div class="popover-list-content" style="display:none;">
        <ul>
            <li>
                Test 2
            </li>
        </ul>
    </div>

    <br>

    <a href="#" class="popover-test" id ="tes3" rel="popover" >Hover for popover</a>

</div>

$(function() {
    $('.popover-test').popover({
        html : true,
        content: function() {
            return $('.popover-list-content').html();
        },
        title: function() {
            return $('.popover-list-title').html();
        }
    });
});

Answer 1

您需要更加具体地使用内容选择器。实际上，您将获得具有类popover-list-content的元素数组中的第一个。你只想要与悬停链接相邻的那个：

content: function () {
    return $(this).next('.popover-list-content').html();
},

<强> Demo

多个Twitter Bootstrap Popover在同一页面上仅显示第一个内容

1 个答案: