私はJqueryを初めて使用し、.load()に問題があります。働き。レストランのサイトを構築しています。ユーザーがメニューのアイテム(menuitemクラス)にカーソルを合わせると、使用しているHTMLファイルmenusrc.htmlからIDiteminfoを使用して適切なデータをdivにロードしたいと思います。 。
APIを読んで、.load()を使用できることを学びました。外部HTMLを取り込み、2番目の引数を使用してロードするコンテンツの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をIDitemInfoのdivにロードします。マウスがmenuItemを離れると、divが空になります。
.hoverを間違って使用しているか、.mouseenterなどを使用する必要があるかもしれませんが、.loadをまったく機能させることができなかったので、間違いがあるのではないかと思います。
助けてくれてありがとう!