Question

第一次发表海报。请温柔。

这个主题可能类似于其他几个问题，但据我所知，这是我试图解决的一个独特问题。 FWIW，我主要是设计师;我对Flash和HTML以及CSS很危险，但在其他一切杂草中都有一点危险。通过搜索，我似乎正在寻找一个ajax / jquery解决方案，我需要一些帮助。

首先，我构建了一个相当复杂的Flash接口，该接口从格式良好且经过验证的XML文件中提取内容。这部分完成，效果很好。

然而，客户想要为没有Flash的观众创建一个简单的（r）javsScript版本的界面。 AND，他们希望这个版本从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，以便每个'page'具有独特的背景颜色和格式。我的想法是，我会使用一个简单的重叠div脚本来显示/隐藏同一个足迹中的每个“部分”。

希望这是有道理的，请不要犹豫澄清。任何和所有的帮助表示赞赏。

Answer 1

听起来您正在尝试从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>

享受！

Answer 2

这是另一个版本。我发现如果你更清洁：

avoid <xsl:for-each/>（使用XSLT的模式匹配而不是更惯用）
使用属性值模板（这些是attribute="{..}"）
您还应该设置<xsl:output/>，因为您正在生成HTML（我假设为4.0）

我假设您可以在输入中的id元素上添加额外的属性<page/>（否则无法从id获取！）

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" indent="yes"/>

<xsl:template match="/">
    <html>
        <body><xsl:apply-templates/></body>
    </html>
</xsl:template>

<xsl:template match="page">
    <div id="{@id}">
        <h1><xsl:value-of select="name"/></h1>
        <p><xsl:value-of select="copy"/></p>
        <img src="{name/@image}"/>
    </div>
</xsl:template>

</xsl:stylesheet>

Answer 3

将XML更改为此（设置div id名称）：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="web_page.xsl"?>
<section>
  <page>
    <div_id>greenBackground</div_id>
    <name image="image1.jpg">Section One</name>
    <copy>This is a description of section one.</copy>
  </page>
  <page>
    <div_id>blueBackground</div_id>
    <name image="image2.jpg">Section Two</name>
    <copy>This is a description of section two.</copy>
 </page>

这个XSL将按您提出的方式翻译您的XML：

<?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>

Answer 4

这是如何使用PHP完成转换：

$proc=new XsltProcessor;  
$proc->importStylesheet(DOMDocument::load("stylesheet.xsl"));  
echo $proc->transformToXML(DOMDocument::load("data.xml"));

将特定XML节点拉入HTML文档

4 个答案: