使用XSL生成的javascript隐藏/显示元素
我有一个包含一些数据的xml文件。我想显示数据的扩展视图或概述。我设法用XSL显示扩展视图,而不是用javascript隐藏概述的某些内容 这是我的xml文件:使用XSL生成的javascript隐藏/显示元素,javascript,xml,xslt,Javascript,Xml,Xslt,我有一个包含一些数据的xml文件。我想显示数据的扩展视图或概述。我设法用XSL显示扩展视图,而不是用javascript隐藏概述的某些内容 这是我的xml文件: <BS> <project> <name>project1</name> <references id="1"> <ref>ref1</ref> <ref>ref2</ref>
<BS>
<project>
<name>project1</name>
<references id="1">
<ref>ref1</ref>
<ref>ref2</ref>
<ref>ref3</ref>
</references>
<references id="2">
<ref>ref4</ref>
<ref>ref5</ref>
<ref>ref6</ref>
</references>
</project>
<project>
<name>project2</name>
<references id="1">
<ref>ref7</ref>
<ref>ref8</ref>
<ref>ref9</ref>
</references>
</project>
</BS>
还有我的XSL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideClass(matchClass)
{
var elems = document.getElementsByTagName('*'),i;
for (i in elems)
{
if((elems[i].className).indexOf(matchClass) > -1)
{
elems[i].style.display = 'none';
}
}
}
function ShowClass(matchClass)
{
var elems = document.getElementsByTagName('*'),i;
for (i in elems)
{
if((elems[i].className).indexOf(matchClass) > -1)
{
elems[i].style.display = 'block';
}
}
}
function ShowOverview()
{
var elems = document.getElementsByTagName('*'),i;
for (i in elems)
{
if((elems[i].className).indexOf('id1') > -1)
{
elems[i].style.display = 'block';
}
else
{
elems[i].style.display = 'none';
}
}
}
</script>
</head>
<body>
<xsl:for-each select="BS/project">
<h3><xsl:attribute name="class"><xsl:value-of select="name"/>-id1</xsl:attribute>
<xsl:value-of select="name"/>
</h3>
<xsl:for-each select="references">
<div><xsl:attribute name="class"><xsl:value-of select="name"/>-id<xsl:value-of select="@id"/></xsl:attribute>
Status: OK<br/>
References id: <xsl:value-of select="@id"/>
<table>
<xsl:for-each select="ref">
<tr><td>
<xsl:value-of select="text()"/>
</td></tr>
</xsl:for-each>
</table>
</div>
<br/>
</xsl:for-each>
<!-- link Hide-->
<xsl:element name="a">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onclick">HideClass('<xsl:value-of select="name"/>');return false;</xsl:attribute>
<i><xsl:text>Hide </xsl:text><xsl:value-of select="name"/></i>
</xsl:element>
<!-- end of link -->
<br/>
<!-- link Show-->
<xsl:element name="a">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onclick">ShowClass('<xsl:value-of select="name"/>');return false;</xsl:attribute>
<i><xsl:text>Show </xsl:text><xsl:value-of select="name"/></i>
</xsl:element>
<!-- end of link -->
<br/>
</xsl:for-each>
<hr/>
<a href="#" onclick="ShowOverview();return false;"> Show only overview</a>
</body>
</html>
但它不起作用。我想在加载页面上显示一切,这是工作!以及在单击“隐藏项目1”时隐藏项目1及其所有内容
此外,我想展示所有项目的概述,包括:
标题ex项目1
第一个引用的状态为ref id=1,表中包含ref 对于每个项目,单击“仅显示概述” 但是我的XSL只能显示所有内容、隐藏所有内容或仅隐藏标题 你对我如何实现我的目标有什么想法吗谢谢。XSLT转换无法隐藏或显示。它生成输出XML、HTML或文本。我认为您希望生成HTML+Javascript,以便在显示和单击特定按钮时,您希望具有相应的显示/隐藏视觉效果。因此,您需要确定什么HTML+Javascript组合具有想要的行为-这是一个纯Javascript问题。只有这样,您才需要解决如何从您拥有的源XML生成如此确定的HTML+Javascript的问题。这里有点不对劲。嗨@julie,正如Dimitre Novatchev所说,在这个阶段,你真的有一个HTML+JavaScript问题。xslt部分是在您解决了这个小问题之后出现的。我要做的是:1。创建一个包含静态虚拟数据和超酷JavaScript的html,其行为完全符合您的要求。2.如果还没有这样做,将这个gem分成html、css和javascript部分。3.开始考虑xslt:定义输入文档,输出是html,并尝试进行转换以弥合两者之间的差距。我相信你会得到很多帮助,通过任何这些小步骤,并享受这样做的乐趣!