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

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