将 Javascript 应用于 XSL
Applying Javascript to XSL
我注意到如果我尝试通过 java 脚本将更改应用于 XSL 文件,它只会影响 XSL 创建的最顶层节点。
例:我想隐藏多个博客条目的所有评论。结果 只有顶级博客条目才会隐藏评论。
我想更改超链接的文本。超链接文本只会在最顶层节点中更改。
如何让 java 脚本影响 XSL 文件创建的所有节点?
网页代码:
<!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
这些更改在第一篇博客文章中是完美的。将创建一个链接来显示和隐藏注释。但是它没有其他地方起作用。
尝试使用 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';
}
}
我编造了自己的示例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_*" 元素。
相关文章:
- 将函数的上下文应用于javascript变量
- 将CSS应用于printWindow.print();在Javascript中
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- $scope.apply()何时应用于angular
- Javascript非常简单:'阅读更多''显示较少'应用于Wordpress的功能
- 尝试应用于<tr>在ng单击中
- 如何将javascript仅应用于1个表单中的2个表单提交按钮中的1个
- 将脚本应用于Angular 2上的输入
- Json和$scope的角度之间的差异$eval应用于JSON字符串时
- 如何将参数应用于String.prototype.format函数
- 动态地将过滤器应用于 JSON.parse()
- $location更改不适用于ngchange,而是应用于ngclick
- 如何将 :empty 选择器应用于 XML 文档
- 如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat
- 如何使用 JavaScript 将样式应用于 CKEditor 中的选定文本
- MongoDB 无法将$addToSet应用于 Meteor JS 中的非数组
- 将类应用于jquery ui对话框
- 将CSS应用于在JavaScript中创建的表-表的位置不正确
- 如何使用javascript将xsl样式应用于html中的嵌入式xml
- 将 Javascript 应用于 XSL