dtzh131555
dtzh131555
2014-07-05 17:35
浏览 147

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

See image below, each item shows only the content from the first item, do you know what I am doing wrong?

$('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 %}

enter image description here

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongmijgnnq0118
    dongmijgnnq0118 2014-07-05 17:54
    已采纳

    because you are using

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

    which gets the html of the first element with class .popover-content

    You need to get the .popover-content element relative to the element that triggered the event. The content callback will have the context of the anchor so you can just wrap it in a jQuery object and use .next:

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

    JSFiddle Demo

    点赞 评论

相关推荐