2

我正在为一位艺术家创建一个网站，我必须在其中根据类别将她的画作组织成四个单独的表格。我有一个 XML 文档，其中列出了所有画作，并进行了相应的组织（这只是一个缩短的版本）：

   <CATALOG>
       <CITYSCAPES>
           <PAINTING>
              <CATEGORY>Cityscapes</CATEGORY>      
              <TITLE>Alley in Florence</TITLE>
              <DIMENSIONS>15 X 20 in.</DIMENSIONS>
              <PRICE>400 $</PRICE>
             <file type="gif">images/thumbnails/cityscapes/alley in florence.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>Christmas in New York</TITLE>
               <DIMENSIONS>12 X 14 in.</DIMENSIONS>
               <PRICE>250 $</PRICE>
               <file type="gif">images/thumbnails/cityscapes/christmas in new york.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>New York, New York</TITLE>
               <DIMENSIONS>21 X 29 in.</DIMENSIONS>
               <PRICE>495 $</PRICE>
               <file type="gif">images/thumbnails/cityscapes/new york new york!.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>30th Street Station</TITLE>
               <DIMENSIONS>10 X 11 in.</DIMENSIONS>
               <PRICE>SOLD</PRICE>
               <file type="gif">images/thumbnails/cityscapes/philly 1.gif</file>
            </PAINTING>
       </CITYSCAPES>
       <FLORA>
           <PAINTING>
               <CATEGORY>Flora</CATEGORY>      
               <TITLE>Plumeria</TITLE>
               <DIMENSIONS>14 X 20 in.</DIMENSIONS>
               <PRICE></PRICE>
               <file type="gif">images/thumbnails/flora/plumeria.gif</file>
          </PAINTING>
          <PAINTING>
           <CATEGORY>Flora</CATEGORY>      
                <TITLE>Tropical in Red</TITLE>
                <DIMENSIONS>14 X 20 in.</DIMENSIONS>
                <PRICE>SOLD</PRICE>
                <file type="gif">images/thumbnails/flora/red leaf.gif</file>
          </PAINTING>
          <PAINTING>
             <CATEGORY>Flora</CATEGORY>      
             <TITLE>Sunflower</TITLE>
             <DIMENSIONS>14 X 20 in.</DIMENSIONS>
             <PRICE></PRICE>
         <file type="gif">images/thumbnails/flora/sunflower.gif</file>
          </PAINTING>
     </FLORA>
   </CATALOG>

这四个类别分别是：Cityscapes、Flora、Still Life、和Fauna（我在这段代码中省略了最后两个），所以结构是CATALOG/CITYSCAPE/PAINTING OR CATALOG/FLORA/PAINTING，当我要访问图像时.

我有一个显示图像的 XSLT 样式表，其中每行有四个图像：

    <html>
        <body>

            <table style="margin: 0 auto;" cellspacing="30">
                <xsl:for-each select="CATALOG/CITYSCAPE/PAINTING[position() mod 4 = 1]">
                    <xsl:if test="CATEGORY='Cityscapes'">
                        <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                    </xsl:if> 
                </xsl:for-each>
            </table>
            <table style="margin: 0 auto;" cellspacing="30" border="1">
                <xsl:for-each select="CATALOG/FLORA/PAINTING[position() mod 4 = 1]">
                    <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}" width="120" height="100%"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                </xsl:for-each>
            </table>
            <table style="margin: 0 auto;" cellspacing="30" border="1">
                <xsl:for-each select="CATALOG/STILL/PAINTING[position() mod 4 = 1]">
                    <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}" width="120" height="100%"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                </xsl:for-each>
            </table>
        </body>
    </html>
</xsl:template>    

</xsl:stylesheet>

我为每个类别创建了单独的表格，并且在显示 Cityscape 图像时，表格的代码在 Chrome 中运行良好，但无法显示以下三个类别的图像。然而，所有画作的标题、尺寸和价格的文字都清楚地显示出来。我一直在寻找这个问题的答案，我觉得它在于我构建 XML 文档的方式。我尝试了几种方法来解决这个问题，包括在 for-each 循环中按类别过滤图像

4

1 回答 1

2

在您的“CITYSCAPES”循环中，您可以使用此代码来渲染图像

<img src = "{file}"></img>

但在你的其他人中，你这样做

<img src = "{file}" width="120" height="100%"></img>

我想知道 Chrome 是否反对这里的高度是百分比？

当然，这会导致另一个问题，主要是代码重复。如果它适用于“CITYSCAPES”，那么您真的想使用相同的代码！

为此，请创建一个模板以匹配CATALOG的任何子元素

<xsl:template match="CATALOG/*">

然后更改您的xsl:for-each以迭代与当前元素相关的PAINTING ，如下所示：

<xsl:for-each select="PAINTING[position() mod 4 = 1]">

您还需要取出不必要的xsl:if

请改用以下 XSLT：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html" indent="yes"/>

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

   <xsl:template match="CATALOG/*">
      <table style="margin: 0 auto;" cellspacing="30">
         <xsl:for-each select="PAINTING[position() mod 4 = 1]">
            <tr>
               <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                  <td valign="bottom" align="center">
                     <img src="{file}"/>
                     <p>
                        <xsl:value-of select="TITLE"/>
                     </p>
                     <p>
                        <xsl:value-of select="DIMENSIONS"/>
                     </p>
                     <p>
                        <xsl:value-of select="PRICE"/>
                     </p>
                  </td>
               </xsl:for-each>
            </tr>
         </xsl:for-each>
      </table>
   </xsl:template>
</xsl:stylesheet>

请注意，如果您需要添加第五个或更多类别，则使用此方法无需进行任何更改。

于 2013-06-13T22:11:07.510 回答