Question

我对Javascript很新，我认为这就是我的问题所在。我想使用Bootstrap popovers来显示特定于弹出数据的链接列表。因此，为了使用标准的书籍/作者示例，我想为每个作者显示一个弹出窗口，其中包含指向所有书籍的链接。在我的桌子里，我有：

<g:each in="${authors}" var="author">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

以及将模板放入popover中的脚本：

 $(function (){
     $("[data-toggle='popover']").popover (
        {html:true,
         trigger: 'click',
         content : function() {
             return $('#popover_content_wrapper').html();
        })
});

假设我的模板正常运行（看起来如此），这仍然只显示所有弹出窗口的第一个作者的数据。我需要做些什么才能为每位作者制作正确的弹出式节目？

Answer 1

问题是你使用相同的id＆＃34; popover_content_wrapper＆＃34;为你的所有作者。尝试使用status属性为每个作者弹出内容提供一个唯一的ID，如下所示：

<g:each in="${authors}" var="author" status="i">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-contentId="popover_content_wrapper_${i}"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper_${i}" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

然后

$(function (){     
        $("[data-toggle='popover']").each(function( index ) {
            var contentId = $( this ).data('contentId');
            var contentElement = $("#" + contentId);

            $(this).popover ({html:true,
                 trigger: 'click',
                 content : function() {
                     return contentElement.html();
                })
            });

});

gsp <g：each>标签中的Bootstrap popover </g：each>

1 个答案: