こんにちは私はxslにxmlからデータをレンダリングさせようとしています。何が間違っているのかわかりません。すべてのブログ記事があるブログエントリページがあり、各ブログエントリに固有のコメントがあります。これはすべて、XSLを使用して正常にレンダリングされるxml内に存在します。問題は、javascriptを使用してコメントを表示および非表示にしようとすると、最初のブログエントリのコメントのみが表示
されます。ここに表示および非表示にするのは私のコードです。
blogData.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>