Question

我对Jquery很新，我遇到了.load（）;功能。我正在为一家餐馆建立一个网站，当用户将鼠标悬停在菜单上的项目（menuitem类）上时，我想将相应的数据加载到我正在使用的HTML文件中使用ID iteminfo的div中，menusrc.html

通过阅读API，我了解到你可以使用.load（）;函数引入外部HTML并使用第二个参数指定要加载的内容的ID。我还是很新的，所以当做更复杂的函数时，我不确定正确的语法。

这是相关的HTML

 <li id="a1" class="menuitem"><span class="num">A1: </span>Gỏi cuốn <em>3.95</em></li>
 <div id="iteminfo">   </div>

和我的Jquery

$(".menuitem").hover(
function () {
$("#iteminfo").load("menusrc.html #" + this.id);
},
function () {
$("#iteminfo").empty();
});

外部html文件位于同一目录中，看起来像是为了测试目的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="a1">THIS IS THE INFO FOR A1</div>
</body>
</html>

在我看来，这个功能应该如下：当鼠标进入类menuItem的项目时，将具有与menuItem相同ID的HTML加载到具有ID itemInfo的div中。当鼠标离开menuItem时，它应该清空div。

也许我正在使用.hover错误或应该使用.mouseenter或其他东西，但我还没有能够得到.load工作，所以我认为我的错误可能就在那里。

提前感谢您的帮助!!

Answer 1

在加载函数中的id之前需要#，并且还有一组额外的括号。删除那些。

尝试：

$("#iteminfo").load("menusrc.html #" + this.id);

使用jquery悬停时使用外部HTML填充DIV

1 个答案: