Question

我有这个XML文档：

<?xml version='1.0' encoding='UTF-8'?>
<content>
    <text>
        <img src='path/01.jpg'/>
        <img src='path/02.jpg'/>
        <img src='path/03.jpg'/>
    </text>
</content>

我想在jssor gallery需要的HTML结构中对其进行转换。这就是我想要的：

<div class='gallery'>
    <div data-u='loading' class='loading'>
        <div></div>
        <div></div>
    </div>

    <div data-u='slides' class='slides'>
        <!-- each img tag will be transformed in to this. The rest of the html is just a fixed structure -->
        <div>
            <img data-u='image' src='path/01.jpg' />
            <img data-u='thumb' src='path/01.jpg' />
        </div>
        <div>
            <img data-u='image' src='path/02.jpg' />
            <img data-u='thumb' src='path/02.jpg' />
        </div>
        <div>
            <img data-u='image' src='path/03.jpg' />
            <img data-u='thumb' src='path/03.jpg' />
        </div>
    </div>

    <span data-u='arrowleft' class='arrowleft'></span>
    <span data-u='arrowright' class='arrowright'></span>

    <div data-u='thumbnavigator' class='thumbnavigator'>
        <div data-u='slides' class='slides'>
            <div data-u='prototype' class='p'>
                <div class='w'>
                    <div data-u='thumbnailtemplate' class='t'></div>
                </div>
                <div class='c'></div>
            </div>
        </div>
    </div>
</div>

这就是我在XSLT中所做的事情：

<xsl:transform version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:tpl='http://www.weblight.com.br/2015/XSL/Template'>

    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="content">
        <div class='jssor_component galeria'>
            <div data-u='loading' class='loading'>
                <div><xsl:comment> </xsl:comment></div>
                <div><xsl:comment> </xsl:comment></div>
            </div>

            <div data-u='slides' class='slides'>
                <xsl:for-each select='text/img'>
                    <div>
                        <img data-u='image' src='{@src}'/>
                        <img data-u='thumb' src='{@src}'/>
                    </div>
                </xsl:for-each>
            </div>

            <span data-u='arrowleft' class='arrowleft'><xsl:comment> </xsl:comment></span>
            <span data-u='arrowright' class='arrowright'><xsl:comment> </xsl:comment></span>

            <div data-u='thumbnavigator' class='thumbnavigator'>
                <div data-u='slides' class='slides'>
                    <div data-u='prototype' class='p'>
                        <div class='w'>
                            <div data-u='thumbnailtemplate' class='t'></div>
                        </div>
                        <div class='c'><xsl:comment> </xsl:comment></div>
                    </div>
                </div>
            </div>
        </div>
    </xsl:template>
</xsl:transform>

但这就是我得到的

<div class="jssor_component galeria">
    <div data-u="loading" class="loading">
        <div></div>
        <div></div>
    </div>

    <div data-u="slides" class="slides"></div>

    <span data-u="arrowleft" class="arrowleft"></span>
    <span data-u="arrowright" class="arrowright"></span>

    <div data-u="thumbnavigator" class="thumbnavigator">
        <div data-u="slides" class="slides">
            <div data-u="prototype" class="p">
                <div class="w">
                    <div data-u="thumbnailtemplate" class="t" />
                </div>
                <div class="c"></div>
            </div>
        </div>
    </div>
</div>

对我而言似乎是因为幻灯片div是空的：/

Answer 1

添加

后

<xsl:output method="xml" indent="yes"/>

作为XSLT中xsl:transform元素的子元素，以便输出XML可读，我得到以下输出XML

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns:tpl="http://www.weblight.com.br/2015/XSL/Template"
     class="jssor_component galeria">
   <div data-u="loading" class="loading">
      <div><!----></div>
      <div><!----></div>
   </div>
   <div data-u="slides" class="slides">
      <div>
         <img data-u="image" src="path/01.jpg"/>
         <img data-u="thumb" src="path/01.jpg"/>
      </div>
      <div>
         <img data-u="image" src="path/02.jpg"/>
         <img data-u="thumb" src="path/02.jpg"/>
      </div>
      <div>
         <img data-u="image" src="path/03.jpg"/>
         <img data-u="thumb" src="path/03.jpg"/>
      </div>
   </div>
   <span data-u="arrowleft" class="arrowleft"><!----></span>
   <span data-u="arrowright" class="arrowright"><!----></span>
   <div data-u="thumbnavigator" class="thumbnavigator">
      <div data-u="slides" class="slides">
         <div data-u="prototype" class="p">
            <div class="w">
               <div data-u="thumbnailtemplate" class="t"/>
            </div>
            <div class="c"><!----></div>
         </div>
      </div>
   </div>
</div>

这看起来很像你的期望。

我认为，无论是分析还是凭经验，您都无法获得包含空data-u="slides" div的XML输出，如您所示：

      <div data-u="slides" class="slides"></div>

Answer 2

当然

<xsl:for-each select='text/img'>

应该是

<xsl:for-each select='div/img'>

使用XSLT通过一堆img标签设置一个jssor库

2 个答案: