使用jquery在悬停时使用外部HTML填充DIV_Jquery_Html_Hover_External

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

jquery html

使用jquery在悬停时使用外部HTML填充DIV,jquery,html,hover,external,Jquery,Html,Hover,External,我是Jquery的新手，在.load（）方面遇到了问题；功能。我正在为一家餐厅构建一个站点，当用户将鼠标悬停在菜单上的项目（menuitem类）上时，我希望将相应的数据加载到一个div中，该div的ID iteminfo来自我正在使用的HTML文件menusrc.HTML 通过阅读API，我了解到您可以使用.load（）；函数引入外部HTML，并使用第二个参数指定要加载的内容的ID。我还是一个新手，所以在执行更复杂的函数时，我不确定语法是否正确下面是相关的HTML <li id="a

我是Jquery的新手，在.load（）方面遇到了问题；功能。我正在为一家餐厅构建一个站点，当用户将鼠标悬停在菜单上的项目（menuitem类）上时，我希望将相应的数据加载到一个div中，该div的ID iteminfo来自我正在使用的HTML文件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>

外部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>


这是A1的信息

在我看来，这个功能应该是这样工作的：当鼠标输入menuItem类的项时，将与menuItem具有相同ID的HTML加载到ID为itemInfo的div中。当鼠标离开菜单项时，应该清空div

也许我用的是.hover错误了，或者应该用.mouseenter之类的东西，但我根本无法获得.load来工作，所以我想我的错误可能就在那里

提前感谢您的帮助

在load函数中的id之前需要一个

，另外还有一组括号。把那些拿走

尝试：

$（“#iteminfo”）.load（“menusrc.html”+this.id）

在load函数中的id之前需要一个

，另外还有一组括号。把那些拿走

尝试：

$（“#iteminfo”）.load（“menusrc.html”+this.id）
您的外部文件最多只能是一个HTML页面，而不是一个碎片好的，我或多或少地将其更改为完整的网页，但它仍然没有加载任何内容到div中。我用新的HTML更新了OP。这似乎完全是在浪费ajax。如果这是你想要做的，而不仅仅是一个简单的例子，你应该考虑你的选择。这种方法将在每次有人将鼠标移到该元素上时使用ajax加载内容，如果内容是静态的，在我看来，只显示和隐藏它会更好。并且在获取内容的文件中不要包含doctype、head、body等，除非您过滤该内容，否则这只会导致无效的标记。@adeneo，没有足够的信息来推断哪种方法更好。所涉元素的数量为unknown@Alexander-在悬停事件中使用ajax加载内容通常是一个坏主意，内容越多，情况就越糟？您的外部文件最多需要是一个HTML页面，而不是一个碎片好的，我或多或少将其更改为一个完整的网页，它仍然没有向div加载任何内容。我已经用新的htmlt更新了OP。这似乎完全是在浪费ajax。如果这是你想要做的，而不仅仅是一个简单的例子，你应该考虑你的选择。这种方法将在每次有人将鼠标移到该元素上时使用ajax加载内容，如果内容是静态的，在我看来，只显示和隐藏它会更好。并且在获取内容的文件中不要包含doctype、head、body等，除非您过滤该内容，否则这只会导致无效的标记。@adeneo，没有足够的信息来推断哪种方法更好。所涉元素的数量为unknown@Alexander-在悬停事件中使用ajax加载内容通常是个坏主意，内容越多，情况就越糟？好吧，实际上我已经丢失了额外的括号。我按照指示添加了#。仍然不工作你确认你的悬停事件是通过放一些简单的东西来触发的吗？那是$document.ready（）
中的悬停代码吗？好的，实际上我已经丢失了额外的括号。我按照指示添加了#。仍然不工作你确认你的悬停事件是通过放一些简单的东西来触发的吗？悬停代码是否在$document.ready（）中？
<!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>