[英]Bootstrap Popover in loop not showing correct content
參見下圖,每一項僅顯示第一項的內容,您知道我做錯了嗎?
$('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 %}
因為你在用
return $(".popover-content").html();
它使用類.popover-content
獲取第一個元素的html
您需要獲取與觸發事件的元素相關的.popover-content
元素。 content
回調將具有錨的上下文,因此您可以將其包裝在jQuery對象中並使用.next
:
content: function() {
return $(this).next(".popover-content").html();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.