Question

我正在尝试使用与Red Box类似的JQuery。我希望能够将鼠标悬停在表格中的条目上，然后有一个框弹出窗口，显示从数据库中提取的条目信息。

到目前为止我能够选择表格中的特定元素，并在将鼠标悬停在这些元素上时发出警告：）

所以我的问题是：如何在从jquery悬停弹出的文本框中显示数据库信息（使用回调，我猜）？

谢谢，
迈克尔

Answer 1

假设您有可以返回正确JSON的服务器端应用程序，实现将是这样的：

$(".item").mouseenter(function(){
    var postUrl = $(this).href;
    // Get the JSON From server, and format the data into the box
    $.getJSON(postUrl, function (data) {
        showInfoBox(data);
    });
});

showInfoBox = function(data) {
    var ibox = $("#divInfoBox");
    $(".name", ibox).html(data.name);
    $(".description", ibox).html(data.description);
    // More data injection here

    ibox.show();

};

相关的HTML将类似于：

<div id="divInfoBox">
    <h3 class="name"></h3>
    <p class="description"></p>
</div>

<.......>

<!-- list of the item that need database data !-->
<ul id="itemList">
    <li><a href="/url/to/data?id=1">1</a></li>
    <li><a href="/url/to/data?id=2">2</a></li>
    <li><a href="/url/to/data?id=3">3</a></li>
</ul>

Answer 2

您也可以在页面生成期间为每个项目创建隐藏的<div>（如果数据不是很大），并将该数据拉入弹出框。这个div可以用jQuery隐藏 - 让没有javascript的人（即谷歌的抓取工具和文本阅读器）仍然可以获得“完整描述”数据。

然后，只需在您悬停时定位/显示<div>即可。 hovertip似乎是一个良好的开端。

不必通过AJAX调用请求数据将使页面感觉更“响应”

Answer 3

希望这个精简描述有助于并且应该与xandy发布的代码一起使用：

我会创建一个动态页面提供JSON。该页面将采取关键信息，以便能够提取该数据背部。然后我会创建一个悬停将信息传递给的事件关于正在悬停的产品的JSON。当数据回来时我会的将该信息填充到DIV或使用模态或工具提示插件来显示资讯

Answer 4

实现此目的的一种相当简单的方法是通过客户端模板，请参阅this blog post以详细了解此情况。总结一下，客户端模板的基本含义是：

您的页面中有一些HTML片段代表悬停显示元素
然后使用jquery对服务器进行AJAX调用以获取要显示的数据。
收到来自AJAX调用的数据后，使用jquery克隆html片段。
最后，将接收到的数据注入克隆的HTML片段并显示。

希望能帮到你。

使用JQuery在悬停上显示数据库信息

4 个答案: