我目前正在切换XSLT（html）xml样式表中的一些表行。
我有6行我隐藏3然后开始onClick命令我想隐藏1行并打开3个其他行。
这就是它的样子
载入xml
first row - Talents_Passive | Talent/Talent_Cost
second row - Prerequisite
third row - Action / Range / Cost
seventh row - Description
//应该可以使用我的jQuery在两者之间切换
first row - Talents_Passive | Talent/Talent_Cost
second row - Prerequisite
fourth row - Action
fifth row - Range
Sixth row - Cost
seventh row - Description
这就是我的代码看起来像
<?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="/Collection">
<html>
<header>
<script type ="text/javascript" src="jquery.js" ></script>
<script>
<!-- insert toggling here -->
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
</header>
<body>
<!-- header -->
<table border="0" width="550" height="25">
<tr>
<td>
<div style="font-family:Calibri, Arial; font-size:15pt">
Passive Talents
</div>
</td>
</tr>
</table>
<!-- Passive Talent loop -->
<xsl:for-each select="Talents_Passive">
<xsl:variable name="i" select="position()"/>
<div style="font-family:Calibri, Arial; font-size:5pt">
<xsl:if test="Talent != ''">
<table border="0" width="550">
<tr>
<td bgcolor="#A0A0A0" width="80%">
<a href="#" onClick="toggle_it('{$i}')"> <b id="toggle"><xsl:value-of select="Talent"/></b></a></td>
<td bgcolor="#A0A0A0" width="20%" align="center">
<xsl:value-of select="Talent_Cost"/><xsl:text> - </xsl:text><xsl:value-of select="Talent_Type"/></td>
</tr>
<xsl:if test="Prerequisite != ''">
<tr>
<td colspan="2" bgcolor="#C0C0C0"><b>Prerequisite: </b><xsl:value-of select="Prerequisite"/></td>
</tr>
</xsl:if>
<tr>
<td colspan="2" bgcolor="#C0C0C0" id="{$i}" style="display:inline;">
<xsl:if test="Action != ''">
<b>Action: </b><xsl:value-of select="Action"/>
</xsl:if>
<xsl:if test="Range != ''">
<xsl:text> </xsl:text> <b>Range: </b><xsl:value-of select="Range"/>
</xsl:if>
<xsl:if test="Cost != ''">
<xsl:text> </xsl:text> <b>Cost: </b><xsl:value-of select="Cost"/>
</xsl:if>
</td>
</tr>
<xsl:if test="Action != ''">
<tr>
<td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Action: </b><xsl:value-of select="Action"/></td>
</tr>
</xsl:if>
<xsl:if test="Range != ''">
<tr>
<td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Range: </b><xsl:value-of select="Range"/></td>
</tr>
</xsl:if>
<xsl:if test="Cost != ''">
<tr>
<td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Cost: </b><xsl:value-of select="Cost"/></td>
</tr>
</xsl:if>
<xsl:if test="Description != ''">
<tr>
<td colspan="2" bgcolor="#EBEBEB"><b>Description: </b><xsl:value-of select="Description"/></td>
</tr>
</xsl:if>
</table>
</xsl:if>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
目前发生的事情是当onClick事件被执行时thrid行隐藏但第四行，第五行和第六行没有显示......
有效我希望第二行用第四行，第五行和第六行交换平台..任何帮助都将不胜感激。
我认为这是我烦恼的原因......
<script>
<!-- insert toggling here -->
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
但我无法弄清楚为什么它不像我计划的那样切换。
答案 0 :(得分：1)
问题是您在生成的HTML中没有唯一的ID。
您必须为每个ID添加前缀。 E.g：
<td colspan="2" bgcolor="#C0C0C0" id="action_{$i}" style="display:inline;">
<td colspan="2" bgcolor="#E0E0E0" id="x_{$i}" style="display:none;">
<td colspan="2" bgcolor="#E0E0E0" id="y_{$i}" style="display:none;">
<td colspan="2" bgcolor="#E0E0E0" id="z_{$i}" style="display:none;">
将您的javascript函数更改为：
function toggle_it_withId(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
function toggle_it(id_nr)
{
toggle_it_withId("action_" + id_nr);
toggle_it_withId("x_" +id_nr);
toggle_it_withId("y_" +id_nr);
toggle_it_withId("z_" +id_nr);
}
但是使用jquery选择器可能会更容易
更新（一个可能性）如何使用jquery：
为天赋表添加一个唯一的ID。
<table border="0" width="550" id="talenttable_{id}" >
为您想要切换的行添加类属性。类似于隐藏的细节和开放的概述。
<td colspan="2" bgcolor="#C0C0C0" class="overview" style="display:inline;">
<td colspan="2" bgcolor="#E0E0E0" class="details" style="display:none;">
将您的切换功能更改为：
function toggle_it(id_nr)
{
$('#talenttable_'+ id_nr + ' .details').toggle();
$('#talenttable_'+ id_nr + ' .overview').toggle();
}