我注意到如果我尝试通过java脚本将更改应用于XSL文件,它只会影响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
第一篇博文中的变化非常完美。创建一个链接以显示和隐藏评论。但没有其他地方可以工作。
答案 0 :(得分:1)
尝试使用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("',$unique-id,'")')"/>
<!-- 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';
}
}
答案 1 :(得分:1)
我编写了自己的示例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_ *”元素。