Question

我想在XSLT中应用jQuery。我的jQuery函数如下：

$('.expand').click(function() {
    $('ul', $(this).parent()).eq(0).toggle();
}); 

ul li ul {
    display: none;
}

如何将此应用于我的以下XSLT代码：

<xsl:template match="product/auto">
    <ul>
        <li>
            <a class="expand">John</a>
        </li>
        <xsl:apply-templates select='admin'/>
    </ul>
</xsl:template>
<xsl:template match="admin">
    <ul>
        <li>
            <a class="expand">Admin</a>
        </li>
        <xsl:apply-templates select=subject>
    </ul>
</xsl:template>
<xsl:template match="subject">
    <ul>
        <li>
            <a class="expand">
                <xsl:value-of select="concat('subject : ',.)"/>
            </a>
        </li>
    </ul>
</xsl:template>

我试着这样做;在XSLT中调用jQuery并在CDATA中包含函数

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html lang="en">
            <head>
                <title></title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <script language="javascript" type="text/javascript">
                    <![CDATA[
                        $('.expand').click(function() {
                            $('ul', $(this).parent()).eq(0).toggle();
                        });

                        ul li ul {
                            display: none;
                        }
                    ]]>
                </script>
            </head>
            <body>
                <h1></h1>
                <xsl:apply-templates/>
            </body>
        </html>
     </xsl:template>
     <xsl:template match="product/auto">
         <ul>
             <li>
                 <a class="expand">John</a>
             </li>
             <xsl:apply-templates select='*'/>
         </ul>
     </xsl:template>
     <xsl:template match="admin">
         <ul>
             <li>
                 <a class="expand">Admin</a>
             </li>
         </ul>
     </xsl:template>
     <xsl:template match="subject">
         <ul>
             <li>
                 <a class="expand">
                     <xsl:value-of select="concat('subject : ',.)"/>
                 </a>
             </li>
         </ul>
    </xsl:template>
</xsl:stylesheet>

运行页面的Html gerenrated如下

<ul>
  <li><a class="expand">John</a></li>
  <ul>
    <li><a class="expand">Admin</a></li>
  </ul>
</ul>

将样式移出Script块，如下所示

   <style>
        ul li ul {
        display: none;
        }
      </style>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
      <![CDATA[
         $('.expand').click(function() {
            $('ul', $(this).parent()).eq(0).toggle();
          });             
     ]]>
    </script>

Answer 1

我并不是100％肯定你正在尝试做什么，但我认为错误是你的jQuery选择器而不是与XSLT有关。您的$('ul', $(this).parent())会尝试匹配＆lt; ul＆gt;在被点击元素的直接父级的范围内，它只是封闭的＆lt; li＆gt;元素，因此没有匹配。

请尝试使用closest：

$('.expand').click(function() {
    $(this).closest('ul').toggle();
  });

我也不确定你为什么会在那里eq(0)，但我可能会遗漏一些东西。

在XSLT中应用jQuery

1 个答案: