个人中心
gpt4 book ai didi

javascript - 使用 jquery 和 xml 构建虚拟网页

转载 作者：行者123 更新时间：2023-11-30 12:04:12 24 4
gpt4 key购买 nike

我正在尝试构建一个网站，该网站包含一个索引或目录“主”页面，以及指向使用 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/

24 4 0
文章推荐： javascript - setTimeOut 和悬停
文章推荐： java - 可以在单击按钮时更改特定 SVG 路径的颜色吗？
文章推荐： Java:如何用另一个可绘制对象 overdraw ImageView 中的现有可绘制对象？
文章推荐： javascript - 将一组选中的复选框的值获取到 JavaScript 数组中，并将它们传递到 ajax 请求中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com