用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的內容

回答

相關問題