将javascript与XML和XSLT一起使用时出现的问题
将javascript与XML和XSLT一起使用时出现的问题
提问于 2012-04-13 16:16:21
嗨，我正在尝试让我的xsl来呈现来自xml的数据，我不确定我做错了什么，我有一个博客条目页面，在那里我有我所有的博客文章，然后我有每个博客条目的评论。所有这些都存在于我的xml中，使用XSL可以很好地呈现这些内容。我的问题是，当我尝试使用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>回答 3
Stack Overflow用户
发布于 2012-04-13 16:51:41
这看起来很像Applying Javascript to XSL。
看一下那里--这可能就是你要找的答案。
Stack Overflow用户
发布于 2012-04-13 16:56:17
首先，我假设你想要做的是一次隐藏和显示所有评论，如果是这样的话，这是一个工作副本：
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>
<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" />
<div id="toggleText" class="commentBlock" 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>
<a href="#" onclick="commentToggle(this); return false;" title="Show Comments">Show comments</a>
</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>Husna</Name>
<Age>23</Age>
<BirthPlace>Hyderabad, India.</BirthPlace>
<CurrentResidence>Tempe, AZ.</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);
}
}
function commentToggle(linkToToggleCommentsElem)
{
if (document.getElementsByClassName)
{
var elems = document.getElementsByClassName("commentBlock");
var wasHidden;
for (var i = 0; i < elems.length; i++)
{
var currentElement = elems[i];
wasHidden = currentElement.style.display == "none";
currentElement.style.display = wasHidden ? "block" : "none";
}
if (wasHidden)
{
linkToToggleCommentsElem.innerHTML = "Hide Comments";
}
else
{
linkToToggleCommentsElem.innerHTML = "Show Comments";
}
}
else
{
// TODO - use jQuery? Or write your own implementation...
}
}
</script>
</head>
<body id="example" onLoad="displayResult()">
</body>
</html>希望它是不言而喻的，但如果不是这样：
- 我删除了在页面底部为每个博客帖子添加“显示评论”链接的原始脚本块
- 添加了一个硬编码链接以显示(切换)评论块
- 将原始方法重命名为显示/隐藏评论并将其移动到index.html
- Assumed浏览器中实现了getElementsByClassName，如果不是这样(IE prob)，请查看类似jQuery的内容或编写您自己的自定义函数
有任何问题，请提出来。
Stack Overflow用户
发布于 2012-04-13 17:32:53
在我看来，您有多个ID为"toggleText“的节点。所以当你getElementByID("toggleText")的时候，你只能得到第一个结果。因此，一种解决方案是通过XSL对注释块进行编号，并将其提供给javascript hide函数，以便指定应该隐藏的节点。
function CommentHide(showHideLink) {
// comment DIV comes right after show hide A node
var commentDivNode = showHideLink.nextSibling;
if(commentDivNode .style.display == "block") {
commentDivNode.style.display = "none";
showHideLink.innerHTML = "show Comments";
}
else {
commentDivNode .style.display = "block";
showHideLink.innerHTML = "hide";
}
} 然后，再往下，使用self向调用A节点传递一个引用。您应该能够省略javascript代码，并将其替换为此A-node：
<a href="javascript:CommentHide(self)"> Show Comments </a>
<div style="display: none">
...
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10137420
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号