gpt4 book ai didi

javascript - 将特定的 XML 节点拉入 HTML 文档

转载 作者:数据小太阳 更新时间:2023-10-29 02:15:24 25 4
gpt4 key购买 nike

第一次海报。请温柔点。

这个主题可能与其他几个问题类似,但据我所知,这是我试图解决的一个独特问题。 FWIW,我主要是一名设计师;我对 Flash、HTML 和 CSS 很危险,但对其他所有东西都有些陌生。通过四处搜索,我似乎正在寻找一个 ajax/jquery 解决方案,我需要一些帮助。

首先,我构建了一个相当复杂的 Flash 界面,它从格式正确且经过验证的 XML 文件中提取内容。这部分已经完成,效果很好。

但是,客户希望为没有 Flash 的观众创建一个简单的 (r) javsScript 版本的界面。并且,他们希望此版本从同一个 XML 文件中提取值(文本),因此他们只需编辑一个文件即可进行更改。

看似合理的要求,但执行起来似乎并不那么简单。最大的障碍是我不想循环输出 XML - 我想将特定节点值调用到特定元素中。

这是我能收集到的最简单的示例。从 XML 像这样:

<section>
<page>
<name image="image1.jpg">Section One</name>
<copy>This is a description of section one.</copy>
</page>
<page>
<name image="image2.jpg">Section Two</name>
<copy>This is a description of section two.</copy>
</page>
</section>

我想像这样创建 HTML:

<div id="greenBackground">
<h1>[value from 1st XML <name> node]</h1>
<p>[value from 1st XML <copy> node]</p>
<img src="[value from 1st XML <name> node image attribute]" />
</div>

<div id="blueBackground">
<h1>[Value of 2nd XML <name> node]</h1>
<p>[Value of 2nd XML <copy> node]</p>
<img src="[value from 2nd XML <name> node image attribute]" />
</div>

它们的关键是每个 div 都有不同的 id,以便每个“页面”都具有独特的背景颜色和格式。然后我的想法是,我将使用一个简单的重叠 div 脚本来显示/隐藏同一足迹内的每个“部分”。

希望这是有道理的,请不要犹豫进行澄清。感谢您提供任何帮助。

最佳答案

听起来您正在尝试将 XML 转换为 HTML。为此,您可以使用一种称为 XSLT 的技术,但通常被称为 xslt transformation。 .您可以将 xslt 与 xpath 结合使用(xml 的查询语言)完全按照您在问题中描述的内容进行操作。

这是 xml:(将 div id 添加到 xml)

<?xml version="1.0" encoding="utf-8"?>
<section>
<page>
<div id="greenBackground"></div>
<name image="image1.jpg">Section One</name>
<copy>This is a description of section one.</copy>
</page>
<page>
<div id="blueBackground"></div>
<name image="image2.jpg">Section Two</name>
<copy>This is a description of section two.</copy>
</page>
</section>

这是 xslt:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<xsl:for-each select="section/page">
<div>
<xsl:attribute name="id">
<xsl:value-of select="div//@id"/>
</xsl:attribute>
<h1>
<xsl:value-of select="name"/>
</h1>
<p>
<xsl:value-of select="copy"/>
</p>
<img>
<xsl:attribute name="src">
<xsl:value-of select="name//@image"/>
</xsl:attribute>
</img>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

这是运行转换后的输出:

<html>
<body>
<div id="greenBackground">
<h1>Section One</h1>
<p>This is a description of section one.</p><img src="image1.jpg"></div>
<div id="blueBackground">
<h1>Section Two</h1>
<p>This is a description of section two.</p><img src="image2.jpg"></div>
</body>
</html>

尽情享受吧!

关于javascript - 将特定的 XML 节点拉入 HTML 文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3161640/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com