使用我的数据库软件，我可以使用XSL模板以HTML格式导出我的相册收藏。 我设法修改 XSL 模板以支持引导程序 4。 现在，我正在尝试添加一个按字母顺序排列的过滤器。我修补了一个 javascript，它可以工作，但在我应用过滤器时没有动画。
因此，要添加动画(淡入、淡出)，就像这里 https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category 的例子一样，我需要根据专辑艺术家的第一个字母在每个专辑中带有 XSL 的div 中添加适当的类。备注：我目前的javascript是临时的，在相册中有正确的类，它将像bootsnip一样简化。
因为我使用数据库软件以 HTML 格式导出，所以我实际上无法提供 XML 输入。但是，如果我以XML格式导出数据库，下面是结果的简短示例：
<musiclist>
<music>
<id>8881</id>
<index>237</index>
<title>A Journey To Rotterdam</title>
<titlesort>Journey To Rotterdam</titlesort>
<releasedate>
<year>
<displayname>2013</displayname>
</year>
<month>5</month>
<day>18</day>
<date>18/05/2013</date>
</releasedate>
<recordingdate/>
<artists>
<artist>
<displayname>Jephté Guillaume</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesJephtGuillaume8878_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesJephtGuillaume8878_i.jpg</scaledimage>
<sortname>Guillaume, Jephté</sortname>
<lastname>Guillaume</lastname>
<url>https://www.facebook.com/jephte.t.guillaume</url>
<firstname>Jephté</firstname>
</artist>
<artist>
<displayname>Diephuis</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesDiephuis8917_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesDiephuis8917_i.jpg</scaledimage>
<sortname>Beljaars, Barend-Jan</sortname>
<lastname>Beljaars</lastname>
<url>https://www.discogs.com/fr/artist/2569040-Diephuis</url>
<firstname>Barend-Jan</firstname>
</artist>
</artists>
<artistfirstletter>
<displayname>G</displayname>
<sortname>G</sortname>
</artistfirstletter>
<composers/>
<genres>
<genre>
<displayname>Deep House</displayname>
</genre>
<genre>
<displayname>Electronic</displayname>
</genre>
</genres>
<notes>100 exemplaires</notes>
<label>
<displayname>Sacred Rhythm Music</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesSacredRhythmMusic818_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesSacredRhythmMusic818_i.jpg</scaledimage>
<sortname>Sacred Rhythm Music (Joe Claussell)</sortname>
<lastname>Sacred Rhythm Music (Joe Claussell)</lastname>
<url>http://www.sacredrhythmmusic.net/news.html</url>
</label>
<labelnumber>SRM 266</labelnumber>
<length>26:31</length>
<lengthsecs>1591</lengthsecs>
<nrtracks>3</nrtracks>
<cddbgenreid1>0</cddbgenreid1>
<compositions/>
<submissiondate/>
<format>
<displayname>12 inch Vinyl</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimages12inchVinyl168_t.png</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesVinyl12inchAlbum16.jpg</scaledimage>
</format>
<cddbgenreid2>0</cddbgenreid2>
<rating>0</rating>
<rating>
<displayname>0</displayname>
<sortname>0</sortname>
</rating>
<studios/>
<conductors/>
<orchestras/>
<choruses/>
<musicians/>
<credits/>
<hash>{CD9CBF02-6850-484C-913F-C63324D6DF15}</hash>
<purchasedate>
<year>
<displayname>2016</displayname>
</year>
<month>1</month>
<day>13</day>
<date>13/01/2016</date>
</purchasedate>
<purchaseprice>7,55 €</purchaseprice>
<origreleasedate/>
<store>
<displayname>Bandcamp</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesBandcamp8680_t.png</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesBandcamp8680_i.jpg</scaledimage>
<sortname>Bandcamp</sortname>
<lastname>Bandcamp</lastname>
<url>https://bandcamp.com/</url>
</store>
<spars>
<displayname>DDD</displayname>
</spars>
<country>
<displayname>Etats-Unis</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesEtatsUnis1000_t.gif</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesEtatsUnis1000_i.jpg</scaledimage>
</country>
<sounds>
<sound>
<displayname>Stereo</displayname>
</sound>
</sounds>
<extras/>
<packaging>
<displayname>Sleeve</displayname>
</packaging>
<rare boolvalue="1">Yes</rare>
<collectionstatus listid="3">In Collection</collectionstatus>
<nrdiscs>1</nrdiscs>
<coverfront>C:UsersGros_DocumentsMusic CollectorImagesSRM 266 front.jpg</coverfront>
<coverback>C:UsersGros_DocumentsMusic CollectorImagesSRM 266 rear.jpg</coverback>
<backgroundbackdrop>CLZBACKDROP</backgroundbackdrop>
<bpalbumid>104663034</bpalbumid>
<links>
<link>
<description>6a A Journey To Rotterdam</description>
<url>https://bandcamp.com/EmbeddedPlayer/album=720079312</url>
<urltype>URL</urltype>
</link>
</links>
<condition/>
<mediacondition/>
<quantity>1</quantity>
<lastmodified>
<date>06/01/2017 16:51:15</date>
</lastmodified>
<dateadded>
<date>19/11/2016 13:30:09</date>
</dateadded>
<thumbfilepath>C:UsersGros_DocumentsMusic CollectorThumbnails6A093329A852EA2DF10C63CADC9F0040.jpg</thumbfilepath>
<details>
<detail type="disc">
<id>8882</id>
<index>1</index>
<title>A Journey To Rotterdam</title>
<titlesort>Journey To Rotterdam</titlesort>
<releasedate>
<year>
<displayname>2013</displayname>
</year>
<month>5</month>
<day>18</day>
<date>18/05/2013</date>
</releasedate>
<recordingdate/>
<artists>
<artist>
<displayname>Jephté Guillaume</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesJephtGuillaume8878_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesJephtGuillaume8878_i.jpg</scaledimage>
<sortname>Guillaume, Jephté</sortname>
<lastname>Guillaume</lastname>
<url>https://www.facebook.com/jephte.t.guillaume</url>
<firstname>Jephté</firstname>
</artist>
<artist>
<displayname>Diephuis</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesDiephuis8917_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesDiephuis8917_i.jpg</scaledimage>
<sortname>Beljaars, Barend-Jan</sortname>
<lastname>Beljaars</lastname>
<url>https://www.discogs.com/fr/artist/2569040-Diephuis</url>
<firstname>Barend-Jan</firstname>
</artist>
</artists>
<artistfirstletter>
<displayname>G</displayname>
<sortname>G</sortname>
</artistfirstletter>
<composers/>
<genres>
<genre>
<displayname>Deep House</displayname>
</genre>
<genre>
<displayname>Electronic</displayname>
</genre>
</genres>
<label>
<displayname>Sacred Rhythm Music</displayname>
<templateimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesSacredRhythmMusic818_t.jpg</templateimage>
<scaledimage>C:UsersGros_DocumentsMusic CollectorImagesListitemimagesSacredRhythmMusic818_i.jpg</scaledimage>
<sortname>Sacred Rhythm Music (Joe Claussell)</sortname>
<lastname>Sacred Rhythm Music (Joe Claussell)</lastname>
<url>http://www.sacredrhythmmusic.net/news.html</url>
</label>
<labelnumber>SRM 266</labelnumber>
<length>26:31</length>
<lengthsecs>1591</lengthsecs>
<nrtracks>3</nrtracks>
<cddbgenreid1>0</cddbgenreid1>
<compositions/>
<submissiondate/>
<cddbgenreid2>0</cddbgenreid2>
<rating>0</rating>
<rating>
<displayname>0</displayname>
<sortname>0</sortname>
</rating>
<studios/>
<conductors/>
<orchestras/>
<choruses/>
<musicians/>
<credits/>
<bitrate>0</bitrate>
<filesize>0</filesize>
</music>
</musiclist>
</musicinfo>
这是我修改的代码的 XSL 部分：对于每个专辑，我想检索专辑的每个艺术家，并根据该艺术家的第一个字母在专辑的div 中应用正确的类。我在每张专辑中最多处理 5 位艺术家。letter 的类与布局引导类连接。
<xsl:template match="musiclist">
<xsl:for-each select="music">
<div align="center">
<xsl:for-each select="artists/artist/displayname">
<xsl:variable name="count"select="position()"/>
<xsl:variable name="ArtistName">
<xsl:value-of select="substring(artists/artist/displayname, 1, 1)"/>
</xsl:variable>
<xsl:variable name="first-letter{$count}">
<xsl:if test="ArtistName= 'A')"> letterA </xsl:if>
<xsl:if test="ArtistName= 'B')"> letterB </xsl:if>
<xsl:if test="ArtistName= 'C')"> letterC </xsl:if>
<xsl:if test="ArtistName= 'D')"> letterD </xsl:if>
<xsl:if test="ArtistName= 'E')"> letterE </xsl:if>
<xsl:if test="ArtistName= 'F')"> letterF </xsl:if>
<xsl:if test="ArtistName= 'G')"> letterG </xsl:if>
<xsl:if test="ArtistName= 'H')"> letterH </xsl:if>
<xsl:if test="ArtistName= 'I')"> letterI </xsl:if>
<xsl:if test="ArtistName= 'J')"> letterJ </xsl:if>
<xsl:if test="ArtistName= 'K')"> letterK </xsl:if>
<xsl:if test="ArtistName= 'L')"> letterL </xsl:if>
<xsl:if test="ArtistName= 'M')"> letterM </xsl:if>
<xsl:if test="ArtistName= 'N')"> letterN </xsl:if>
<xsl:if test="ArtistName= 'O')"> letterO </xsl:if>
<xsl:if test="ArtistName= 'P')"> letterP </xsl:if>
<xsl:if test="ArtistName= 'Q')"> letterQ </xsl:if>
<xsl:if test="ArtistName= 'R')"> letterR </xsl:if>
<xsl:if test="ArtistName= 'S')"> letterS </xsl:if>
<xsl:if test="ArtistName= 'T')"> letterT </xsl:if>
<xsl:if test="ArtistName= 'U')"> letterU </xsl:if>
<xsl:if test="ArtistName= 'V')"> letterV </xsl:if>
<xsl:if test="ArtistName= 'W')"> letterW </xsl:if>
<xsl:if test="ArtistName= 'X')"> letterX </xsl:if>
<xsl:if test="ArtistName= 'Y')"> letterY </xsl:if>
<xsl:if test="ArtistName= 'Z')"> letterZ </xsl:if>
</xsl:variable>
</xsl:for-each>
<xsl:attribute name="class">
<xsl:value-of select="concat('col-xs-12 col-sm-6 col-md-2 filter ', $first-letter1, $first-letter2, $first-letter3, $first-letter4, $first-letter5 )"/>
</xsl:attribute>
<xsl:apply-templates select="."/>
</div>
</xsl:for-each>
</xsl:template>
<xsl:template match="music">
<xsl:choose>
<xsl:when test="$details = 'true'">
<xsl:variable name="the_href">details/<xsl:value-of select="id"/>.html</xsl:variable>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="$absolutelinks = 'true'">
<xsl:if test="coverfront!=''">
<xsl:variable name="the_href">file:///<xsl:value-of select="coverfront"/></xsl:variable>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="coverfront!=''">
<xsl:variable name="the_href">images/<xsl:value-of select="id"/>f.jpg</xsl:variable>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="thumbfilepath!=''">
<xsl:variable name="the_img_src">images/<xsl:value-of select="id"/>t.jpg</xsl:variable>
</xsl:when>
<xsl:otherwise>
<xsl:variable name="the_img_src">images/mainitem.jpg</xsl:variable>
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="the_caption"><xsl:value-of select="title"/></xsl:variable>
<a href="{$the_href}" title="{$the_caption}" ><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>
在这里，您可以看到相册的HTML结果：
<div class="row equal" id="album-table">
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter ">
<a href="details/8660.html" title="Afrikan Basement - Unreleased Extended Versions - Disc 1">
<img src="images/8660t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Bolla</div>
<div class="album">Afrikan Basement - Unreleased Extended Versions - Disc 1</div>
<br/>
</div>
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter ">
<a href="details/8881.html" title="A Journey To Rotterdam">
<img src="images/8881t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Jephté Guillaume | Diephuis</div>
<div class="album">A Journey To Rotterdam</div>
<br/>
</div>
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter ">
<a href="details/376.html" title="La Home Box - Disc 3">
<img src="images/376t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Laurent Garnier | Traumer | Bambounou</div>
<div class="album">La Home Box - Disc 3</div>
<br/>
</div>
</div>
但是如果我的代码是正确的，结果应该如下所示：
<div class="row equal" id="album-table">
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterB ">
<a href="details/8660.html" title="Afrikan Basement - Unreleased Extended Versions - Disc 1">
<img src="images/8660t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Bolla</div>
<div class="album">Afrikan Basement - Unreleased Extended Versions - Disc 1</div>
<br/>
</div>
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterJ letterD ">
<a href="details/8881.html" title="A Journey To Rotterdam">
<img src="images/8881t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Jephté Guillaume | Diephuis</div>
<div class="album">A Journey To Rotterdam</div>
<br/>
</div>
<div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterL letterT letterB ">
<a href="details/376.html" title="La Home Box - Disc 3">
<img src="images/376t.jpg" class="img-fluid rounded"/>
</a>
<div class="artist">Laurent Garnier | Traumer | Bambounou</div>
<div class="album">La Home Box - Disc 3</div>
<br/>
</div>
</div>
我不知道为什么 XSL 没有将正确的类添加到div 而连接有效。
你有什么提示吗？
如果我能够在div 中添加适当的类，我将能够在 html 中应用新的响应式和动画布局，就像这里的这个例子一样
感谢您的帮助。
您在某处确实有一个 XML 输入，因为 XSLT 将 XML 文档作为要转换的输入，所以我猜测您的"数据库软件"正在以 XML 格式返回数据以供 XSLT 转换。
如果在查看 XML 输入时遇到问题，查找它的一种方法是使用 XSLT 标识转换，这将生成与输入相同的输出。
无论如何，为了回答您的问题，我假设您的 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é 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>
XSLT 中的第一个问题是如何定义变量
<xsl:variable name="ArtistName">
<xsl:value-of select="substring(artists/artist/displayname, 1, 1)"/>
</xsl:variable>
此时您已经定位在displayname元素上，因此 xpathartists/artist/displayname将查找一个名为artists的displayname子元素，该子元素不存在。整个陈述可以简化为这个...
<xsl:variable name="ArtistName" select="substring(., 1, 1)"/>
(事实上，你在这里并不真正需要使用变量，稍后会看到)
第二个问题是这不是有效的语法。不能有动态变量名称。
<xsl:variable name="first-letter{$count}">
即使这是有效的，变量也是在xsl:for-each块中定义的，因此它将仅限于此范围，但您正在尝试在超出范围的xsl:for-each之后使用它。
您的xsl:if列表也有点重复，并且无论如何也不会输出任何内容，因为您正在检查ArtistName，它会查找名为ArtistName的元素。您应该一直使用$ArtistName来检查变量。
无论如何，长话短说，您可以将整个模板简化为此。因此，您无需使用变量，而是在xsl:attribute块中动态构建类字符串
<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: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>
您可以在 http://xsltransform.net/pNmBy1N 中看到它的实际效果