如何匹配两个标签并显示图像?

时间:2013-12-05 10:33:55

标签: html xml xslt coldfusion

我有一个XML文件,如下所示:

<sport id="02">
    <event>Ceremonies</event>
    <discipline>Closing Ceremony</discipline>
    <fromdate>2014-08-03</fromdate>
    <todate>2014-08-03</todate>
    <place>Hampden Park</place>
</sport>

<sport id="03">
    <event>Aquatics</event>
    <discipline>Diving</discipline>
    <fromdate>2014-07-30</fromdate>
    <todate>2014-08-02</todate>
    <place>Royal Commonwealth Pool</place>
</sport>

<venue id="01">
<name>Royal Commonwealth Pool</name>
<image>http://downloads.glasgow2014.com/sites/default/files/styles/lead-listing/public/images/Royal-Commonwealth-Pool-bb6.jpg</image>
<alt>Image of the Royal Commonwealth Pool</alt>
<about>With Arthurs Seat outside and award-winning architecture inside, Edinburghs Royal Commonwealth Pool offers a dramatic setting for the Diving competitions. The original Royal Commonwealth Pool was designed by RMJM Architects in 1967 for the Edinburgh 1970 Commonwealth Games and it was used again for Edinburgh 1986. Owned by City of Edinburgh Council, the venue has undergone major refurbishment, including the upgrading of the diving pool todate meet international standards.</about>
<address>Dalkeith Road</address>
<city>Edinburgh</city>
<postcode>EH16 5BB</postcode>
<telephone>0131 667 7211</telephone>
<email>info.rcp@edinburghleisure.co.uk</email>
<latitude>55.93901</latitude>
<longitude>-3.172781</longitude>
</venue>

<venue id="04">
<name>Hampden Park</name>
<image>http://downloads.glasgow2014.com/sites/default/files/styles/lead-listing/public/images/Hampden-Park-753.jpg</image>
<alt>Image of Hampden Park</alt>
<about>At one time the worlds largest stadium, Glasgows famous Hampden Park will play host todate the Track and Field Athletics competitions and the XX Commonwealth Games Closing Ceremony. Hampden Park is an iconic place not only for Glaswegians, but also for all Scots as it is home todate the national football team.</about>
<address>Hampden Park</address>
<city>Glasgow</city>
<postcode>G42 9BA</postcode>
<telephone>0141 620 4000</telephone>
<email>info@hampdenpark.co.uk</email>
<latitude>55.825973</latitude>
<longitude>-4.252238</longitude>

这是我的XSLT代码:

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

<xsl:param name="id">1</xsl:param>

<xsl:template match="/">
<html>
<head>
    <title></title>     
</head>

<body>

<div id="main">
    <br/>
    <h2>Commonwealth Games 2014 Event Information</h2>
    <hr/>
    <xsl:apply-templates select="/games/sport[@id=$id]"/>
</div>

</body>
</html>

</xsl:template>

<xsl:template match="sport">

<div id="sport">
    <b>Event: </b><xsl:value-of select="event"/>
    <br/>
    <br/>
    <b>Discipline: </b><xsl:value-of select="discipline"/>
    <br/>
    <br/>
    <b>From: </b><xsl:value-of select="fromdate"/>
    <br/>
    <br/>
    <b>To: </b><xsl:value-of select="todate"/>
    <br/>
    <br/>
    <b>Venue: </b><xsl:value-of select="place"/>
    <br/>
</div>

</xsl:template>

</xsl:stylesheet>

我有一个事件列表,当点击一个事件时,它会显示一个页面,其中包含来自我的XML运动部分的详细信息。

在这个页面上我还想要一个场地图像,所以我想做这样的事情:

如果在体育部分,该地方说“汉普顿公园”,那么我希望它与场地部分中的名称相匹配,并从图像标签中显示图像。

我使用ColdFusion生成HTML页面。

任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:1)

如果你可以硬编码图像,这就是你如何引入条件。你要找的是xsl:choose元素,我敢说。

这是一个简单的示例,说明如何根据现有样式表中变量$id的值将图像输出到HTML。

<xsl:choose>
  <xsl:when test="$id = '01'">
     <xsl:element name="img">
        <xsl:attribute name="src">
           <xsl:value-of select="venue[@id='01']/image"/>
        </xsl:attribute>
        <xsl:attribute name="alt">
           <xsl:value-of select="venue[@id='01']/alt"/>
        </xsl:attribute>
     </xsl:element>
  </xsl:when>
  <xsl:otherwise>
     <xsl:element name="img">
        <xsl:attribute name="src">
           <xsl:value-of select="venue[@id='04']/image"/>
        </xsl:attribute>
        <xsl:attribute name="alt">
           <xsl:value-of select="venue[@id='04']/alt"/>
        </xsl:attribute>
     </xsl:element>
  </xsl:otherwise>
</xsl:choose>

编辑:在澄清真正的问题后,请转到:

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

<xsl:output method="xml"  version="1.0" omit-xml-declaration="yes" 
  indent="yes" media-type="text/html"/> 

<xsl:param name="id" select="02"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
  <html>
     <head>
         <title></title>     
     </head>
     <body>
        <div id="main">
            <br/>
               <h2>Commonwealth Games 2014 Event Information</h2>
               <hr/>
              <xsl:apply-templates/>
        </div>
     </body>
  </html>
</xsl:template>

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

<xsl:template match="sport[@id=$id]">
  <div id="sport">
      <b>Event: </b><xsl:value-of select="event"/>
      <br/>
      <br/>
      <b>Discipline: </b><xsl:value-of select="discipline"/>
      <br/>
      <br/>
      <b>From: </b><xsl:value-of select="fromdate"/>
      <br/>
      <br/>
      <b>To: </b><xsl:value-of select="todate"/>
      <br/>
      <br/>
      <b>Venue: </b><xsl:value-of select="place"/>
      <br/>
  </div>

  <div id="image">
     <xsl:element name="img">
        <xsl:attribute name="src">
           <xsl:value-of select="../venue[name=current()/place]/image"/>
        </xsl:attribute>
        <xsl:attribute name="alt">
           <xsl:value-of select="../venue[name=current()/place]/alt"/>
        </xsl:attribute>
     </xsl:element>
  </div>
</xsl:template>
<xsl:template match="venue|sport[@id!=$id]"/>

</xsl:stylesheet>