第一次海报。请保持温柔。
这个主题可能与其他几个问题类似，但据我所知，这是我要解决的独特问题。 FWIW，我主要是设计师；我对Flash，HTML和CSS感到很危险，但对于其他所有事物，我还是有些杂草。通过搜索，我似乎正在寻求ajax / jquery解决方案，我需要一些帮助。
首先，我构建了一个相当复杂的Flash接口(interface)，该接口(interface)从格式正确且经过验证的XML文件中提取内容。这部分完成了，效果很好。
但是，客户端希望为没有Flash的查看器创建一个简单的javsScript版本的界面。并且，他们希望该版本从SAME 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 :(在xml中添加了div id)
<?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>
请享用!