Javascript 在XSLT1.0中添加带条件的div类_Javascript_Html_Css_Xslt_Xslt 1.0

Javascript 在XSLT1.0中添加带条件的div类

javascript html css xslt

Javascript 在XSLT1.0中添加带条件的div类,javascript,html,css,xslt,xslt-1.0,Javascript,Html,Css,Xslt,Xslt 1.0,使用我的数据库软件，我可以用XSL模板导出HTML格式的相册集。我设法修改XSL模板以支持Bootstrap4。现在，我正在尝试添加一个按字母顺序排列的过滤器。我修补了一个javascript，它可以工作，但在应用过滤器时没有动画因此，要添加动画（淡入淡出），就像这里的示例一样，我需要根据专辑艺术家的第一个字母在每个专辑中使用XSL在div中添加适当的类。备注：我当前的javascript是临时的，在相册中有正确的类，它将被简化为bootsnip 因为我使用数据库软件以HTML格式导出，

使用我的数据库软件，我可以用XSL模板导出HTML格式的相册集。我设法修改XSL模板以支持Bootstrap4。现在，我正在尝试添加一个按字母顺序排列的过滤器。我修补了一个javascript，它可以工作，但在应用过滤器时没有动画

因此，要添加动画（淡入淡出），就像这里的示例一样，我需要根据专辑艺术家的第一个字母在每个专辑中使用XSL在div中添加适当的类。 备注：我当前的javascript是临时的，在相册中有正确的类，它将被简化为bootsnip

因为我使用数据库软件以HTML格式导出，所以我实际上无法提供XML输入。但如果我以XML格式导出数据库，下面是一个简短的结果示例：


8881
237
鹿特丹之旅
鹿特丹之旅
2013
5.
18
18/05/2013
|

在这里，您可以看到相册的HTML结果：


博拉
南非地下室-未发布的扩展版本-光盘1


杰普特é；纪尧姆|迪菲斯
鹿特丹之旅


Laurent Garnier | Traumer | Bambounou
洛杉矶家庭电视台-光盘3

但是如果我的代码是正确的，结果应该是这样的：


博拉
南非地下室-未发布的扩展版本-光盘1


杰普特é；纪尧姆|迪菲斯
鹿特丹之旅


Laurent Garnier | Traumer | Bambounou
洛杉矶家庭电视台-光盘3

我不明白为什么XSL不将正确的类添加到div，而串联却可以工作

你有什么提示吗

如果我能够将适当的类添加到div中，我将能够在html中应用新的响应和动画布局，就像

谢谢您的帮助。

您确实在某个地方有一个XML输入，因为XSLT将XML文档作为输入进行转换，所以我猜您的“数据库软件”正在以XML格式返回数据，以便XSLT进行转换

如果您在查看XML输入时遇到问题，找到它的一种方法是使用，这将生成与输入相同的输出

无论如何，为了回答您的问题，我假设您的XML如下所示

<musiclist>
    <music>
        <id>8660</id>
        <title>Afrikan Basement - Unreleased Extended Versions - Disc 1</title>
        <thumbfilepath>?</thumbfilepath>
        <coverfront>?</coverfront>
        <artists>
            <artist><displayname>Bolla</displayname></artist>
        </artists>
    </music>
    <music>
        <id>8881</id>
        <title>A Journey To Rotterdam</title>
        <thumbfilepath>?</thumbfilepath>
        <coverfront>?</coverfront>
        <artists>
            <artist><displayname>Jepht&#233; Guillaume</displayname></artist>
            <artist><displayname>Diephuis</displayname></artist>
        </artists>
    </music>
    <music>
        <id>376</id>
        <title>La Home Box - Disc 3</title>
        <thumbfilepath>?</thumbfilepath>
        <coverfront>?</coverfront>
        <artists>
            <artist><displayname>Laurent Garnier</displayname></artist>
            <artist><displayname>Traumer</displayname></artist>
            <artist><displayname>Bamboun</displayname></artist>
        </artists>
    </music>
</musiclist>

（事实上，您不需要在这里使用变量，稍后将看到这一点）

第二个问题是，这不是有效的语法。不能有动态变量名

<xsl:variable name="first-letter{$count}">

请注意，与音乐匹配的模板也存在范围可变的问题。如果变量可能有用，只需将

xsl:choose

语句放在

xsl:variable

块中，而不是相反

初学者可以尝试使用此XSLT

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

    <xsl:param name="details" select="'true'" />
    <xsl:param name="absolutelinks" select="'true'" />
    <xsl:param name="thumbshowcaption" select="'true'" />

    <xsl:template match="/">
        <div class="row equal" id="album-table">
            <xsl:apply-templates />
        </div>
    </xsl:template>

    <xsl:template match="musiclist">
        <xsl:for-each select="music">
            <div align="center">
                <xsl:attribute name="class">
                    <xsl:text>col-xs-12 col-sm-6 col-md-2 filter</xsl:text>
                    <xsl:for-each select="artists/artist/displayname">
                        <xsl:value-of select="concat(' letter', substring(., 1, 1))" />
                    </xsl:for-each>
                </xsl:attribute>
                <xsl:apply-templates select="."/>
            </div>
        </xsl:for-each> 
    </xsl:template>

    <xsl:template match="music">
        <xsl:variable name="the_href">
            <xsl:choose>
                <xsl:when test="$details = 'true'">
                    <xsl:text>details/</xsl:text><xsl:value-of select="id"/><xsl:text>.html</xsl:text>
                </xsl:when>
                <xsl:when test="$absolutelinks = 'true'">
                    <xsl:if test="coverfront!=''">
                        <xsl:text>file:///</xsl:text><xsl:value-of select="coverfront"/>
                    </xsl:if>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:if test="coverfront!=''">
                        <xsl:text>images/</xsl:text><xsl:value-of select="id"/><xsl:text>f.jpg</xsl:text>
                    </xsl:if>
                </xsl:otherwise>            
            </xsl:choose>
        </xsl:variable>

        <xsl:variable name="the_img_src">
            <xsl:choose>
                <xsl:when test="thumbfilepath != ''">
                    <xsl:text>images/</xsl:text><xsl:value-of select="id"/><xsl:text>t.jpg</xsl:text>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>images/mainitem.jpg</xsl:text>
                </xsl:otherwise>            
            </xsl:choose>
        </xsl:variable>

        <a href="{$the_href}" title="{title}" >
            <img src="{$the_img_src}" class="img-fluid rounded"/>
        </a>

        <xsl:if test="$thumbshowcaption = 'true'">
            <xsl:if test="artists!=''">
                <div class="artist">
                    <xsl:for-each select="artists/artist/displayname">
                        <xsl:apply-templates select="."/>
                        <xsl:if test="position()!=last()">
                            <xsl:text> | </xsl:text>
                        </xsl:if>
                    </xsl:for-each>
                </div>
            </xsl:if>
            <div class="album"><xsl:value-of select="title"/></div>
            <br/>
        </xsl:if>  
    </xsl:template>
</xsl:stylesheet>


col-xs-12 col-sm-6 col-md-2滤波器
详细信息/.html
文件：///
图片/f.jpg
图片/t.jpg
images/mainitem.jpg
|

您可以在

上看到它的作用。您可以编辑您的问题以显示您的输入XML吗？另外，你确定你得到了任何产出吗<代码>在XSLT中是无效语法（即使是，变量在定义它们的块的作用域中是局部的，并且您尝试在不同的作用域中引用变量）。谢谢。你好，谢谢你的回答。正如我所说的，我使用了一个数据库软件，它能够以HTML格式导出。所以我没有真正的xml输入。但是，我可以添加一个XML导出而不是HTML，但我不知道它是否相关。我是一个编码高手，我不知道如何确定是否真的产生了输出。哇，这正是我需要的，它工作得很好。非常感谢。我离正确答案太远了。。。

<xsl:variable name="first-letter{$count}">

<xsl:template match="musiclist">
    <xsl:for-each select="music">
        <div align="center">
            <xsl:attribute name="class">
                <xsl:text>col-xs-12 col-sm-6 col-md-2 filter</xsl:text>
                <xsl:for-each select="artists/artist/displayname">
                    <xsl:value-of select="concat(' letter', substring(., 1, 1))" />
                </xsl:for-each>
            </xsl:attribute>
            <xsl:apply-templates select="."/>
        </div>
    </xsl:for-each> 
</xsl:template>

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

    <xsl:param name="details" select="'true'" />
    <xsl:param name="absolutelinks" select="'true'" />
    <xsl:param name="thumbshowcaption" select="'true'" />

    <xsl:template match="/">
        <div class="row equal" id="album-table">
            <xsl:apply-templates />
        </div>
    </xsl:template>

    <xsl:template match="musiclist">
        <xsl:for-each select="music">
            <div align="center">
                <xsl:attribute name="class">
                    <xsl:text>col-xs-12 col-sm-6 col-md-2 filter</xsl:text>
                    <xsl:for-each select="artists/artist/displayname">
                        <xsl:value-of select="concat(' letter', substring(., 1, 1))" />
                    </xsl:for-each>
                </xsl:attribute>
                <xsl:apply-templates select="."/>
            </div>
        </xsl:for-each> 
    </xsl:template>

    <xsl:template match="music">
        <xsl:variable name="the_href">
            <xsl:choose>
                <xsl:when test="$details = 'true'">
                    <xsl:text>details/</xsl:text><xsl:value-of select="id"/><xsl:text>.html</xsl:text>
                </xsl:when>
                <xsl:when test="$absolutelinks = 'true'">
                    <xsl:if test="coverfront!=''">
                        <xsl:text>file:///</xsl:text><xsl:value-of select="coverfront"/>
                    </xsl:if>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:if test="coverfront!=''">
                        <xsl:text>images/</xsl:text><xsl:value-of select="id"/><xsl:text>f.jpg</xsl:text>
                    </xsl:if>
                </xsl:otherwise>            
            </xsl:choose>
        </xsl:variable>

        <xsl:variable name="the_img_src">
            <xsl:choose>
                <xsl:when test="thumbfilepath != ''">
                    <xsl:text>images/</xsl:text><xsl:value-of select="id"/><xsl:text>t.jpg</xsl:text>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:text>images/mainitem.jpg</xsl:text>
                </xsl:otherwise>            
            </xsl:choose>
        </xsl:variable>

        <a href="{$the_href}" title="{title}" >
            <img src="{$the_img_src}" class="img-fluid rounded"/>
        </a>

        <xsl:if test="$thumbshowcaption = 'true'">
            <xsl:if test="artists!=''">
                <div class="artist">
                    <xsl:for-each select="artists/artist/displayname">
                        <xsl:apply-templates select="."/>
                        <xsl:if test="position()!=last()">
                            <xsl:text> | </xsl:text>
                        </xsl:if>
                    </xsl:for-each>
                </div>
            </xsl:if>
            <div class="album"><xsl:value-of select="title"/></div>
            <br/>
        </xsl:if>  
    </xsl:template>
</xsl:stylesheet>