用javascript函数发布xslt转换的单独div的内容

我想通过xslt转换来读取xml文件并将内容放入不同的div。我在某些解决方案中受到限制，我无法使用任何服务器端语言，此内容将在本地运行（直接从CD），并且必须在IE中工作（我知道为何正确？）每个客户端规格用javascript函数发布xslt转换的单独div的内容

本质上，我想将所有的阶段放在“阶段”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; 

}

来源

2013-03-12 happymacarts

，如果你给了我们一个这将有助于预期产出。你的问题到底是什么？你想知道为什么这个xsl不能像你期望的那样工作吗？只要看看代码，在你的for内部 - 每个XPath都是不正确的。 – ljdelight 2013-03-12 02:31:42

而不是做另一XSLT转换EA当用户点击一个链接时，可能首先展示页面上所有可能的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-12 08:42:22

感谢您的详细解释。我现在就开始工作，让你知道它是如何工作的。 – happymacarts 2013-03-12 17:37:45

令人惊叹的工作蒂姆，正是我需要的，你做了比我预期的更多的工作，我所要做的就是复制和粘贴。现在我只需添加指向课程的链接即可完成。谢谢您的帮助。 +10 – happymacarts 2013-03-12 17:44:54

用javascript函数发布xslt转换的单独div的内容

回答

相关问题