个人中心
gpt4 book ai didi

javascript - 将 javascript 与 XML 和 XSLT 结合使用时出现问题

转载 作者：行者123 更新时间：2023-11-28 21:04:52 25 4
gpt4 key购买 nike

嗨，我正在尝试让我的 xsl 从 xml 呈现数据，我不确定我做错了什么，我有一个博客条目页面，其中包含我所有的博客文章，然后我有特定于每个博客条目的评论。所有这些都存在于我的 xml 中，它使用 XSL 渲染得很好，我的问题是当我尝试使用 javascript 来显示和隐藏评论时，我只得到第一个博客条目的评论来显示和隐藏
这是我的代码，我将不胜感激任何帮助

博客数据.xsl

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

 <!-- This  is used to match everything thing rite up from the root element-->
 <xsl:param name="id" />
 <xsl:template match="/">
 <html>

<head>
<script language="javascript"> 
 function CommentHide() {

var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    a.innerHTML = "show Comments";
}
else {
    ele.style.display = "block";
    a.innerHTML = "hide";
}
   } 
   </script>
   <title>
   View Blog
   </title>
   </head>
    <!-- The body contains the entire formatting for the page in general , like color  font ect-->
  <body style="font-family:Arial;font-size:12pt; background-color:#FFE4E1">
  <!-- The document uses inline styling-->
   <div align="center">
<img src="banner.gif" alt="Banner Image"/>
</div>
    <table border="0">
    <tr>
    <!--This reduces the column one's with to fit 80% of the page leaving the rest for the profile section-->
    <td width="80%">
    <div style="align:left">
    <!-- use for each to indicate more than one blog entries that may be there i.e 3 in this page-->
    <xsl:for-each select="blog/BlogEntries">
    <!-- The sort just like for-each and value-of  will perform the task on the selected element in this case sorts the blog entries-->
    <xsl:sort select="CreationTime"/>

  <div style="margin-left:50px;margin-bottom:1em;font-size:10pt;margin-right:50px;">


    <h1><b> <xsl:value-of select="Title"/></b></h1>
    <hr/>
    <h3><b> <i> <xsl:value-of select="CreationTime"/></i></b></h3>
     <xsl:value-of select="Description"/>
      <script type="text/javascript">
              var ele = document.getElementById("toggleText");
              var a = document.createElement('a');
               a.title = "Show Comments";

              a.innerHTML = a.title;
              a.href = "javascript:CommentHide()";
              document.body.appendChild(a);

        </script>
        <div id="toggleText" style="display: none">
      <xsl:for-each select="Comments/Comment">
    <span style="font-style:italic">

     <h3><xsl:value-of select="Title"/></h3>
      <div style="position:relative;"><xsl:value-of select="Description"/>    </div>
      <div style="position:relative;left:350px;"><xsl:value-of select="Creator"/> </div>          
    </span>
     </xsl:for-each>
  </div>
  </div>

</xsl:for-each>
</div >  
</td>


  <div style="color:black;position:relative;line-height:20px;float:right;width:100%;height:100%;top:50px;padding:4px;align:right">
  <!-- this is the other column of the table which contains the profile where each element is just a value-of selcted type-->
  <td margin-left="75px" wigth="100%">



  <h3>Profile :</h3>
  <img src="me.gif" alt="display pic" width="100" height="100" />
 <br/><br/> <b>Name :</b><xsl:value-of select="blog/Profile/Name" /><br/>
    <br/><b>Age:</b><xsl:value-of select="blog/Profile/Age"/><br/>
     <br/><b>Birth Place :</b><xsl:value-of select="blog/Profile/BirthPlace"/><br/>
     <br/><b>Current Residence :</b><xsl:value-of select="blog/Profile/CurrentResidence"/><br/>
     <br/><b>Occupation :</b><xsl:value-of select="blog/Profile/Occupation"/><br/>
     <xsl:value-of  select="blog/Profile/gender"/>

     </td>
              </div>
     </tr>
     </table>     
      </body>

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

blogData.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <?xml-stylesheet type="text/xsl" href="blogData.xsl"?> 
    <blog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="blogData.xsd"> 


    <Profile>
<Name> Yaba</Name>
<Age>23</Age>
<BirthPlace> India. </BirthPlace>
<CurrentResidence>USA</CurrentResidence>
<Occupation>Student</Occupation>
<flag gender="f"/>
    </Profile>


     <BlogEntries id ="1">
<ID>1</ID>
<Title>Blog-1 : High Performance Web Sites </Title>  
<CreationTime> 1999-12-04T20:12:00.000</CreationTime>
<Description>Book Overview : The book has been written by Steve Souders, 
is one of the most elaborate one's discussing the performance parameters. 
In the words of  Nate Koechley, Senior Frontend Engineer Yahoo! User Interface (YUI) Team, 
Platform. As a frontend engineer, you hold a tremendous amount of power and responsibility.
Youre the users last line of defense.The decisions you make directly shape their experience.
I believe our number one job is to take care of them and to give them what they wantquickly.
This book is a toolbox to create happy users (and bosses, too).Best of all,
once you put these techniques in placein most cases, a one-time tweakyoull be reaping the rewards far into the future.</Description>

<Comments>
<Comment>
<Title>Comment - 1.1 </Title>
<Description> This is the first comment by the User written about the blog1</Description>
<Creator>User - 1.1</Creator>
</Comment>

<Comment>
<Title>Comment - 1.2 </Title>
<Description> This is the second comment by the User written about the blog1</Description>
<Creator>User - 1.2</Creator>
</Comment>
</Comments>

    </BlogEntries>

     <BlogEntries id="2">
<ID>2</ID>
<Title>Blog-2 :The Importance of Frontend Performance</Title>  
<CreationTime>03-01-12, 9 AM</CreationTime>
<Description>Most of my web career has been spent as a backend engineer.As such, I  dutifully
      approached each performance project as an exercise in backend optimization, concentrating
     on compiler options, database indexes, memory management, etc.Theres
     a lot of attention and many books devoted to optimizing performance in these areas,
      so thats where most people spend time looking for improvements.In reality, for
      most web pages, less than 1020% of the end user response time is spent getting the
      HTML document from the web server to the browser.If you want to dramatically
     reduce the response times of your web pages, you have to focus on the other 8090%
      of the end user experience.What is that 8090% spent on? How can it be reduced?
      The chapters that follow lay the groundwork for understanding todays web pages
      and provide 14 rules for making them faster.</Description>

<Comments>
<Comment>
<Title>Comment - 2.1 </Title>
<Description> This is the only comment by the User written about the blog2</Description>
<Creator>User - 2.1</Creator>
</Comment>
</Comments>

    </BlogEntries>

    <BlogEntries id="3" >
<ID>3</ID>
<Title>Blog-3 :Tracking Web Page Performance </Title>  
<CreationTime>02-01-2012, 6 PM</CreationTime>
<Description>In order to know what to improve, we need to know where the user spends her time
  waiting.Figure A-1 shows the HTTP traffic when Yahoo!s home page (http://www.
  yahoo.com) is downloaded using Internet Explorer.Each bar is one HTTP request.
   The first bar, labeled html, is the initial request for the HTML document.Th e
   browser parses the HTML and starts downloading the components in the page.In
   this case, the browsers cache was empty, so all of the components had to be     downloaded.
   The HTML document is only 5% of the total response time.The user spends
   most of the other 95% waiting for the components to download; she also spends a
   small amount of time waiting for HTML, scripts, and stylesheets to be parsed, as
   shown by the blank gaps between downloads.</Description>
<Comments>
<Comment>
<Title>Comment - 3.1 </Title>
<Description>This is the first comment by the User written about the blog3</Description>
<Creator>User - 3.1</Creator>
</Comment>
<Comment>
<Title>Comment - 3.2 </Title>
<Description> This is the second comment by the User written about the  blog3</Description>
<Creator>User - 3.2</Creator>
</Comment>
<Comment>
<Title>Comment - 3.3 </Title>
<Description> This is the third comment by the User written about the blog3</Description>
<Creator>User - 3.3</Creator>
</Comment>
</Comments>
    </BlogEntries>
     </blog>

index.html

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
        <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- This is the user login page that authenticates users-->

        <title>
        View Blog Page
        </title>
        <script>
        function loadXMLDoc(fname)
        {
        var xmlDoc;
        // code for IE
        if (window.ActiveXObject)   
        { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); }
        //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 displayResult()
        {
        xml=loadXMLDoc("blogData.xml");
        xsl=loadXMLDoc("blogData.xsl");
        // code for IE
        if (window.ActiveXObject)
        {
        ex = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = ex;
        }
        // code for Mozilla, Firefox, Opera, etc.
        else if (document.implementation.createDocument)
        {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);

        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("example").appendChild(resultDocument);
        }
        }
        </script> </head>
        <div>
        <body  id="example" onLoad="displayResult()">
        </div>

        </body>

        </html>

最佳答案

这看起来很像 Applying Javascript to XSL .

看看那里 - 这可能就是您正在寻找的答案。

关于javascript - 将 javascript 与 XML 和 XSLT 结合使用时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10137420/

25 4 0
文章推荐： python - 在python中读取TDMS文件如何使用tdms info命令？
文章推荐： ios - Xcode9无线调试上不了大学网
文章推荐： JavaScript 变量赋值不起作用
文章推荐： javascript - 使用 Javascript 启用复选框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com