见下图,每个项目只显示第一项的内容,你知道我做错了吗?
$('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 %}
答案 0 :(得分:4)
因为您正在使用
return $(".popover-content").html();
使用类.popover-content
您需要获取相对于触发事件的元素的.popover-content
元素。 content
回调将具有锚点的上下文,因此您可以将其包装在jQuery对象中并使用.next
:
content: function() {
return $(this).next(".popover-content").html();
}
<强> JSFiddle Demo 强>