我正在尝试构建一个网站，该网站包含一个索引或目录“主”页面，以及指向使用 xml 文件中的数据构建的多个虚拟页面的链接。 我已经成功地对网站进行了硬编码，但是尝试从 xml 文件中提取文本并构建虚拟页面给我带来了困难，因为我使用的命令要么不起作用，要么给出语法错误或其他内容，具体取决于我的尝试。
在目前的尝试中，我得到:
uncaught error: syntax error, unrecognized expression: div data-role="header">
我的索引页 index.html 看起来像这样
<html>
<head>
<meta charset="utf-8">
<title>Assignment2</title>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" type="text/css" href="style.css"/>-->
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script type="text/javascript" src="jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Anime Watching This Season</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="list-view">
<li><a href="#erased">Erased</a></li>
<li><a href="#active_raid">Active Raid</a></li>
<li><a href="#dimension_w">Dimension W</a></li>
<li><a href="#grimgar">Grimgar of Fantasy and Ash</a></li>
<li><a href="#konosuba">KonoSuba</a></li>
</ul>
</div>
<div data-role="footer" class="center">
<p>You are on the homepage</p>
</div>
</div>
</body>
</html>
我的 JavaScript 文件 javascript.js 如下所示:
$(document).ready(function(){
$.ajax ({
type: "GET",
url: "series.xml",
dataType: "xml",
success: parseXML
});
function parseXML (mydoc)
{
$(mydoc).find("series").each(function(){
//$("#output").append ("<div> trial div</div>");
$("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
$("div data-role=\"header\">").appendTo('body');
$("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
$("</div>").appendTo('body');
$("div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
$("div data-role=\"footer\" class=\"center\">" + "</div> </div>").appendTo('body');
$("#inbody").append("<div data-role=\"page\" id=\"erased\"");
//$("<div data-role=\"page\" id=\"").appendTo("body");
//$(this).find("name").appendTo("body");
//$("\">").appendTo("body");
});
}
});
名为 series.xml 的 xml 文件如下所示
<anime>
<series title="erased">
<name>Erased</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>erased.jpeg</image>
</series>
<series title="active_raid">
<name>Active Raid</name>
<description>some text</description>
<description>some text</description>
<image>active_raid.jpeg</image>
</series>
<series title="dimension_w">
<name>Dimension W</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>dimension_w.jpeg</image>
</series>
<series title="grimgar">
<name>Grimgar of Fantasy and Ash</name>
<description>Awaken...</description>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>grimgar.jpeg</image>
</series>
<series title="konosuba">
<name>KonoSuba</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>konosuba.jpeg</image>
</series>
</anime>
我之前尝试过搜索解决方案，但我发现的信息越多，它就越令人困惑，因此，如果有人能为我指明正确的方向或解释如何构建这个解决方案，我将不胜感激。
最佳答案
你错过了很多 <和 >在$(...)里面.这有点莫名其妙，因为你有一半的时间是正确的语法。请勤于检查语法。
$(mydoc).find("series").each(function(){
//$("#output").append ("<div> trial div</div>");
$("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
$("<div data-role=\"header\">").appendTo('body');
$("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
$("</div>").appendTo('body');
$("<div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
$("<div data-role=\"footer\" class=\"center\">" + "</div>").appendTo('body');
$("#inbody").append("<div data-role=\"page\" id=\"erased\">");
//$("<div data-role=\"page\" id=\"">).appendTo("body");
//$(this).find("name").appendTo("body");
//$("\">").appendTo("body");
});
你可能有更多，我试着清理了大部分，但我不知道你的目标 HTML 结构。
关于javascript - 使用 jquery 和 xml 构建虚拟网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35713381/