0

我正在尝试通过 xslt 转换读取 xml 文件并将内容放入不同的 div 中。我在某些解决方案中受到限制，因为我不能使用任何服务器端语言，此内容将在本地运行（直接从 cd 运行）并且必须在 IE 中工作（我知道为什么对吗？）每个客户端规范

本质上，我想将所有阶段放在“阶段” div 中，并使用 onClick 函数将课程加载到“课程” div

下面的一些代码是伪代码，无法运行，提前感谢您的帮助。

XML 文件

    <?xml version="1.0" encoding="utf-8"?>
        <menu frame="UH1Y" curriculum="Crew Chief Training ICW">
          <phase name='Unit 01'>
             <lesson link='lesson01/menu.htm'>lesson 01</lesson>
             <lesson link='lesson02/menu.htm'>lesson 02</lesson>
             <lesson link='lesson03/menu.htm'>lesson 03</lesson>
             <lesson link='lesson04/menu.htm'>lesson 04</lesson>
             <lesson link='lesson0/menu.htm'>lesson 05</lesson>
          </phase>
      <phase name='Unit 02'>
        <lesson link='lesson01/menu.htm'>lesson 01</lesson>
        <lesson link='lesson02/menu.htm'>lesson 02</lesson>
        <lesson link='lesson03/menu.htm'>lesson 03</lesson>
      </phase>
    </menu>

XSL 文件

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>menu</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts/menu.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="container2">
      <div id="phase">
        <ul>
          <xsl:for-each select="menu/phase">
            <li  onclick='loadLesson(<xsl:value-of select="menu/phase/@name[current()]"/>);'> 
            <xsl:value-of select="@name"/></li>
          </xsl:for-each>
        </ul>
      </div>
      <div id="lesson2">
        <ul>
          <xsl:for-each select="menu/phase[position() = {*the current phase*]/lesson">
            <li><xsl:value-of select="."/></li>
          </xsl:for-each>
        </ul>
      </div>
    </div>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

JS文件

function loadLesson(x) {
    alert(x);
    //<xsl:value-of select="menu/phase/@name[current()]"/>
    theDiv=document.getElementById('lesson2')
    theDiv.innerHTML = x;

}
4

1 回答 1

0

与其在每次用户单击链接时进行另一个 XSLT 转换，不如先简单地渲染页面上所有可能的 div，然后将它们全部隐藏（使用 CSS 显示属性）。然后，当他们选择“阶段”时，只需让相关的 div 可见。

不过，您的 XSLT 的第一个问题是

 <li onclick='loadLesson(<xsl:value-of select="menu/phase/@name[current()]"/>);'>

将 XSLT 元素嵌入到这样的属性中是无效的。在这种情况下，您确实需要使用“属性值模板”。另请注意，由于您已经定位在阶段元素上，因此您无需在此处编写完整路径，只需@name 即可。

 <li onclick="loadLesson('{@name}');'>

注意这里的花括号，因为这表示属性值模板，并且花括号的内容是评估的，而不是字面输出。

实际上，因为每个阶段都有一个单独的 div，所以每个这样的 div 都需要一个唯一的 ID，其中没有空格，所以这样做可能会更好

<li onclick="loadLesson('phase_{generate-id()}');">

然后渲染每个阶段的课程，你可以这样做

  <xsl:for-each select="menu/phase">
  <div id="phase_{generate-id()}" style="display:none">
    <ul>
      <xsl:for-each select="lesson">
        <li><xsl:value-of select="."/></li>
      </xsl:for-each>
    </ul>
  </div>
  </xsl:for-each>

再次注意使用属性值模板来设置 div 的 Id。

然后，最后，您将编写您的 javascript 函数loadLesson，如下所示：

var current_div = null;
function loadLesson(divId)
{
   if (current_div != null) current_div.style.display = 'none';

   current_div = document.getElementById(divId);
   current_div.style.display = 'block';
}

在这种情况下，这是完整的 XSLT：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>menu</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts/menu.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="container2">
      <div id="phase">
        <ul>
          <xsl:for-each select="menu/phase">
            <li onclick="loadLesson('phase_{generate-id()}');"> 
               <xsl:value-of select="@name"/>
            </li>
          </xsl:for-each>
        </ul>
      </div>
      <xsl:for-each select="menu/phase">
      <div id="phase_{generate-id()}" style="display:none">
        <ul>
          <xsl:for-each select="lesson">
            <li><xsl:value-of select="."/></li>
          </xsl:for-each>
        </ul>
      </div>
      </xsl:for-each>
    </div>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
于 2013-03-12T08:42:22.447 回答