Question

我试图在鼠标悬停在按钮上时显示图像。它在第一页上工作正常。它会打开一个小窗口并显示图像。但在第二页它停止工作。当我将鼠标悬停在按钮上时，它会打开一个小窗口，但其中没有图像。让我告诉你我的.jsp页面是如何工作的。

<form:form name="order" modelAttribute="order" method="post" action="/res/confirm">
     <div class="table-responsive">
        <div class="checkbox">
            <label> 
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Dish</th>
                            <th>Price</th>
                            <th>Images</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${today}" var="menu" varStatus="status">
                            <tr>
                                <td><form:checkbox path="menus" value="${menu}"
                                        label="${menu.name}" /></td>
                                <td>${menu.price}</td>
                                **<td><a href="#" id="popover" class="btn" rel="popover" data-img="resources/img/${menu.name}.jpg">${menu.name}</a></td>**                                  
                            </tr>
                        </c:forEach>
                    </tbody>                        
                </table>
            </label>
        </div>                              
                        <button type="submit" class="btn btn-success">Submit</button>
    </div>
</form:form>

这是我在关闭</body>标记内的javascript：

<script>
    $('a[rel=popover]').popover({
            html : true,
            trigger : 'hover',
            placement : 'bottom',               
            content : function() {
                return '<img src="' + $(this).data('img') + '" />';
            }
        });
    </script>

我认为这里值得一提的是这个menu.jsp页面还有其他链接。此页面显示今天的菜单。此页面还有指向其他日期菜单的链接。当我点击任何其他日期菜单链接时，Spring MVC控制器方法准备列表并将它们发送回同一menu.jsp页面以显示菜单和其他日期菜单链接。为了表明我在说什么，我在这附上了一张照片。

感谢任何帮助，我将感激你。

Answer 1

修改

在看到您使用$(this).data('img')获取图片的网址后，正确的方法是通过您正在执行的功能调用content。

在我看来，您应该只检查网址，看看它是否指向真实图片。

所以你应该检查图像路径。

我第一次提出的方式是这样使用的content : '<img src="path/to/image.jpg">'; 的 SEE THIS

THIS

<强> ORIGINAL

我不能发表评论，我在这里发帖：

尝试使用：

content : '<img src="' + $(this).data('img') + '" />';

而不是：

content : function() { return '<img src="' + $(this).data('img') + '" />'; }

Bootstrap popover在第一页后不起作用

1 个答案: