將JavaScript應用於XSL

我注意到，如果我嘗試通過Java腳本將更改應用於XSL文件，它只會影響由XSL創建的最頂層節點。將JavaScript應用於XSL

例如：我想隱藏多個博客條目的所有評論。結果只有頂部的博客條目會隱藏評論。

我想更改超鏈接的文本。超鏈接文本只會在最上方的節點中更改。

如何獲取java腳本來影響由XSL文件創建的所有節點？

HTML代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css" > 
     <title>My Blog</title> 

     <script> 

     function loadXMLDoc(fname) 
     { 

       var xmlDoc; 

       // code for IE 
       if (window.ActiveXObject) 
       { 
        xmlDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); 
       } 
       // code for Mozilla, Firefox, Opera, etc. 
       else if (document.implementation.createDocument) 
       { 
        xmlDoc = document.implementation.createDocument("", "", null); 
       } 
       else 
       { 
        alert('Your browser cannot handle this script'); 
       } 
       xmlDoc.async=false; 
       xmlDoc.load(fname); 
       return(xmlDoc); 
      } 

      function loadEntries() 
      { 
       xmlDoc = loadXMLDoc("blogData.xml"); 
       xslDoc = loadXMLDoc("blogData.xsl"); 

       // for Firefox, Safari, etc. 
       if (document.implementation.createDocument) 
       { 
        var xsltProcessor = new XSLTProcessor(); 
        xsltProcessor.importStylesheet(xslDoc); 
        xsltProcessor.setParameter(null, "id", 11); 
        var resultDocument = xsltProcessor.transformToFragment(xmlDoc,document); 
        document.getElementById("entries").appendChild(resultDocument); 

       } 
       // Internet Explorer 
       else if (window.ActiveXObject) 
       { 
        var xslTemplate=new ActiveXObject("MSXML2.XSLTemplate"); 
        xslTemplate.stylesheet=xslDoc; 
        var xslProc = xslTemplate.createProcessor(); 
        xslProc.input = xmlDoc; 
        xslProc.addParameter("id", 11); 
        xslProc.transform(); 
        document.getElementById("entries").innerHTML = xslProc.output;     
       } 

      } 

      function displayResult() 
      { 
       var xml=loadXMLDoc("blogData.xml"); 
       var xsl=loadXMLDoc("blogData.xsl"); 
       // code for IE 
       if (window.ActiveXObject) 
       { 
        var ex = xml.transformNode(xsl); 
        document.getElementById("entries").innerHTML = ex; 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
       // code for Mozilla, Firefox, Opera, etc. 
       else if (document.implementation.createDocument) 
       { 
        var xsltProcessor = new XSLTProcessor(); 
        xsltProcessor.importStylesheet(xsl); 
        var resultDocument = xsltProcessor.transformToFragment(xml,document); 
        document.getElementById("entries").appendChild(resultDocument); 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
      } 

      function hideShow(){ 
       if(document.getElementById("comments").style.display == 'none'){ 
        document.getElementById("comments").style.display = 'block'; 
        document.getElementById("hideShowLink").innerHTML = 'Hide Comments'; 
       } else { 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
      } 

     </script> 

    </head> 

    <body onLoad="displayResult()"> 
     <table width="100%" border="0"> 
      <tr> 
       <td colspan="2"> 
        <div class="imgcentered"> 
         <img src="banner.gif" alt="banner" /> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div id="entries"> 
        </div> 
       </td> 
       <td class="rightside"> 
        <div class="rightbody"> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li>Archives</li> 
         <li>Profile 
         <br/> 
         <img src="pokemon.gif" alt="pokemin" width="40%"/><br/> 
         <br/> 

         <dl> 
          <dt><b>Name:</b></dt> 
           <dd>Ash Catchem</dd> 
          <dt><b>Age:</b></dt> 
           <dd>Old Enough</dd> 
          <dt><b>Birth Place:</b></dt> 
           <dd>Pallet Town</dd> 
          <dt><b>Current Residence:</b></dt> 
           <dd>Kanto</dd> 
          <dt><b>Occupation:</b></dt> 
           <dd>Pokemon Catcher</dd> 
         </dl> 
         </li> 
        </ul> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

XSL代碼：

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/"> 
     <html> 

      <body> 
       <div class="leftbody"> 
        <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
        <xsl:for-each select="//entries"> 
         <xsl:sort select="creationTime/@sort" order="descending" /> 
         <p><xsl:value-of select="creationTime"/>[<a href="javascript:hideShow()"> <xsl:value-of select="count(comments)"/> Comments</a>]</p> 
         <h1><xsl:value-of select="title"/></h1> 
         <p><xsl:value-of select="description"/></p> 
         <br/> 
         <p><a href="javascript:hideShow()" id="hideShowLink" class="comments"></a></p> 
         <br/><hr/><br/> 

         <div id="comments" class="comments"> 
         <h2>Comments:</h2> 
          <xsl:for-each select="//comments"> 
           <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
           <p class="comments"><xsl:value-of select="description"/></p> 
           <p class="comments">-- <xsl:value-of select="creator"/></p> 
          </xsl:for-each> 
          <hr/> 
         </div> 

        </xsl:for-each> 



       </div> 

      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

網頁我與玩：http://dl.dropbox.com/u/12914798/Project%202/index.html

的變化是在第一篇博客完美。創建鏈接以顯示和隱藏評論。但沒有其他地方工作。

來源

2012-04-11 meriley

如果您添加blogData.xml的示例，我可以快速查看它 – Maestro13 2012-04-11 08:29:59

嘗試使用generate-id（）函數爲A和DIV標籤使用唯一ID。

中的某些變化XSLT：

   <xsl:for-each select="//entries"> 
        <xsl:sort select="creationTime/@sort" order="descending" /> 

        <!-- define variables --> 
        <xsl:variable name="unique-id"> 
         <xsl:choose> 
          <xsl:when test="position() = 1"> 
           <xsl:value-of select="''"/> 
          </xsl:when> 
          <xsl:otherwise> 
           <xsl:value-of select="generate-id(.)"/> 
          </xsl:otherwise> 
         </xsl:choose> 
        </xsl:variable> 
        <xsl:variable name="comments-id" select="concat('comments',$unique-id)"/> 
        <xsl:variable name="hideShowLink-id" select="concat('hideShowLink',$unique-id)"/> 
        <xsl:variable name="a-href" select="concat('javascript:hideShow(&#34;',$unique-id,'&#34;)')"/> 

        <!-- title and description --> 
        <p><xsl:value-of select="creationTime"/>[<xsl:element name="a"><xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute> <xsl:value-of select="count(comments)"/> Comments</xsl:element>]</p> 
        <h1><xsl:value-of select="title"/></h1> 
        <p><xsl:value-of select="description"/></p> 
        <br/> 
        <p> 
         <xsl:element name="a"> 
          <xsl:attribute name="id"><xsl:value-of select="$hideShowLink-id"/></xsl:attribute> 
          <xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute> 
          <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute> 
          Show Comments 
         </xsl:element> 
        </p> 
        <br/><hr/><br/> 

        <!-- comments --> 
        <xsl:element name="div"> 
         <xsl:attribute name="id"><xsl:value-of select="$comments-id"/></xsl:attribute> 
         <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute> 
         <xsl:attribute name="style"><xsl:value-of select="'display:none'"/></xsl:attribute> 
         <h2>Comments:</h2> 
         <xsl:for-each select="//comments"> 
          <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
          <p class="comments"><xsl:value-of select="description"/></p> 
          <p class="comments">-- <xsl:value-of select="creator"/></p> 
         </xsl:for-each> 
         <hr/> 
        </xsl:element> 

       </xsl:for-each>

而且你需要更改JS功能：

 function displayResult() 
     { 
      var xml=loadXMLDoc("p100993_IR1.2_output_without_header_1.csv.xml"); 
      var xsl=loadXMLDoc("LoadVendorAnalytic.xsl"); 
      // code for IE 
      if (window.ActiveXObject) 
      { 
       var ex = xml.transformNode(xsl); 
       document.getElementById("entries").innerHTML = ex; 
      } 
      // code for Mozilla, Firefox, Opera, etc. 
      else if (document.implementation.createDocument) 
      { 
       var xsltProcessor = new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 
       var resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("entries").appendChild(resultDocument); 
      } 
     } 

     function hideShow(id){ 
      if(document.getElementById("comments"+id).style.display == 'none'){ 
       document.getElementById("comments"+id).style.display = 'block'; 
       document.getElementById("hideShowLink"+id).innerHTML = 'Hide Comments'; 
      } else { 
       document.getElementById("comments"+id).style.display = 'none'; 
       document.getElementById("hideShowLink"+id).innerHTML = 'Show Comments'; 
      } 
     }

來源

2012-04-11 10:03:46 Aniketos

您是第一個，肯定 - 有趣的是我們在同一時間處理完全相同的答案:-)除了我使用@排序屬性似乎是唯一的，並且您使用了生成（id），這當然是更正確的一般。 – Maestro13 2012-04-11 10:31:00

這真的很有趣！我想回想一下XSLT。 – Aniketos 2012-04-11 16:26:08

哇，我不知道XSLT中的元素調用可以使用元素和屬性創建HTML。我學習了XSLT的一個全新技巧！也感謝你的代碼，它的工作熟練，它的理解非常清楚。肯定從它學到了一噸:) – meriley 2012-04-11 16:34:27

我提出了我自己的樣品blogData.xml，我發現這個問題：你希望有展開/摺疊處理的每個單獨的條目元素，但這需要單獨的id並將id傳遞給hideShow函數。試試這個：

function hideShow(commentsId){ 
    if(document.getElementById(commentsId).style.display == 'none'){ 
     document.getElementById(commentsId).style.display = 'block'; 
     document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Hide Comments'; 
    } else { 
     document.getElementById(commentsId).style.display = 'none'; 
     document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Show Comments'; 
    } 
}

和

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/"> 
     <html> 

      <body> 
       <div class="leftbody"> 
        <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
        <xsl:for-each select="//entries"> 
         <xsl:sort select="creationTime/@sort" order="descending" /> 
         <xsl:variable name="commentsId">comments_<xsl:value-of select="creationTime/@sort"/></xsl:variable> 

         <p><xsl:value-of select="creationTime"/> 
          [ 
          <xsl:element name="a"> 
           <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute> 
           <xsl:value-of select="count(comments)"/> Comments 
          </xsl:element> 
          ] 
         </p> 
         <h1><xsl:value-of select="title"/></h1> 
         <p><xsl:value-of select="description"/></p> 
         <br/> 
         <p> 
          <xsl:element name="a"> 
           <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute> 
           <xsl:attribute name="id">hideShowLink_<xsl:value-of select="$commentsId"/></xsl:attribute> 
           <xsl:attribute name="class">comments</xsl:attribute> 
          Hide Comments 
          </xsl:element> 
         </p> 
         <br/><hr/><br/> 

         <xsl:element name="div"> 
         <xsl:attribute name="id"><xsl:value-of select="$commentsId"/></xsl:attribute> 
         <xsl:attribute name="class">comments</xsl:attribute> 
         <h2>Comments:</h2> 
          <xsl:for-each select="comments"> 
           <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
           <p class="comments"><xsl:value-of select="description"/></p> 
           <p class="comments">-- <xsl:value-of select="creator"/></p> 
          </xsl:for-each> 
          <hr/> 
         </xsl:element> 

        </xsl:for-each> 



       </div> 

      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

注意，我把所有的元素div和a唯一的ID。請注意，我添加了「隱藏評論」作爲按鈕的起始值。如果您仍然希望在加載時添加值，那麼您必須遍歷所有id =「hideShow_ *」元素。

來源

2012-04-11 10:28:15 Maestro13

將JavaScript應用於XSL

回答

相關問題