javascript - 循环中的 Bootstrap Popover 未显示正确的内容

Question

参见下图，每个项目仅显示第一个项目的内容，你知道我做错了什么吗？

$('body').popover({
    selector: '[data-popover]',
    trigger: 'click hover',
    placement: 'right',
    html: true,
    delay: {show: 50, hide: 400},
    content: function() {
        return $(".popover-content").html();
    }
});

{% for activityItem in activity %}
<li>
    <div class="popover-container">
        <a class="popover-dw" href="{{ path('show_user', {'username': user.username }) }}"
           data-popover="true">
            {{ user.username }}
        </a>
        <div class="popover-content" style="display:none">
            <img src="{{ asset(user.avatar) }}" alt="{{ user.username }}"
                 width="80" height="80" style="float:left; margin: 0 10px 10px 0"/>
            <strong>
                {{ user.username }}
            </strong>
        </div>
    </div>
</li>
{% endfor %}

Answer 1

因为您正在使用

return $(".popover-content").html();

获取类 .popover-content 的第一个元素的 html

您需要获取与触发事件的元素相关的 .popover-content 元素。 content 回调将具有 anchor 的上下文，因此您可以将其包装在 jQuery 对象中并使用 .next:

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

JSFiddle Demo