Question

我有以下XSLT：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template name="displayPano" match="/">
        <xsl:for-each select="/root">
            <xsl:variable name="imageSrc" select="imgPano/img/@src" />
            <div class="demo">
                <div id="myPano" class="pano" style="background-image: url('{imageSrc}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
                <div class="controls">
                        <a href="javascript:void(0);" class="left"></a>
                        <a href="javascript:void(0);" class="right"></a>
                    </div>
                </div>
            </div>
        </xsl:for-each>
    </xsl:template>
</xsl:stylesheet>

XML：

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <imgPano>
        <img src="/uploadedImages/myfolder/TEST/PANO.jpg" alt="pano image" />
    </imgPano>
</root>

ASP.net：

<CMS:ContentBlock ID="cbPano" runat="server" DefaultContentID="111111" DisplayXslt="displayPano.xsl" />

当我转到该页面时，我看到以下内容（来源）：

<div id="myPano" class="pano" style="background-image: url(''); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;"><div class="controls"><a href="javascript:void(0);" class="left"></a><a href="javascript:void(0);" class="right"></a></div></div>

如何解决它以便正确显示背景图像。

我需要能够在页面加载时执行以下Jquery：

<script>
        $(document).ready(function () {
            $("#myPano").pano({
                img: "{$imageSrc}"
            });
        });
    </script>

如何直接将其添加到XSL中。

Answer 1

除了在引用变量时使用$，我建议你编写样式表

没有命名模板
没有xsl:for-each，因为循环遍历单个元素没有意义

但是您的实际问题可能更复杂，并且有些情况下循环和命名模板实际上是有用的。

为什么要将图像路径存储在变量中呢？在这个具体案例中，在我看来

style="background-image: url('{imgPano/img/@src}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;"

也可读，更直接。

XSLT样式表

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

    <xsl:template match="/root">
            <xsl:variable name="imageSrc" select="imgPano/img/@src" />
            <div class="demo">
                <div id="myPano" class="pano" style="background-image: url('{$imageSrc}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
                <div class="controls">
                        <a href="javascript:void(0);" class="left"></a>
                        <a href="javascript:void(0);" class="right"></a>
                    </div>
                </div>
            </div>
    </xsl:template>
</xsl:stylesheet>

HTML输出

<div class="demo">
   <div id="myPano"
        class="pano"
        style="background-image: url('/uploadedImages/myfolder/TEST/PANO.jpg'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
      <div class="controls">
         <a href="javascript:void(0);" class="left"/>
         <a href="javascript:void(0);" class="right"/>
      </div>
   </div>
</div>

为什么不在XSLT文件中填充背景图像

1 个答案: