0

我目前正在我的 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 事件被执行时第三行隐藏,但第四、第五和第六行不显示......

有效我希望第二排与第四排、第五排和第六排交换 plaes.. 任何帮助将不胜感激。

我想这就是我烦恼的原因...

<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>

但我无法弄清楚为什么它不会像我计划的那样切换。

4

1 回答 1

1

The problem is that you do not have unique id's in your generated html.

Your have to add a prefix to each of your id's. 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;">

And change your javascript function to something like:

    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);
      } 

But this could be even easier with jquery slectors

Update (one posibility) how to do this whith jquery:

  • Add an unique id to you talent table.

    <table border="0" width="550" id="talenttable_{id}" >
    
  • Add class attributes to your row' you like to toggle. Something like details for the hidden ones and overview for open ones.

    <td colspan="2" bgcolor="#C0C0C0" class="overview" style="display:inline;">
    <td colspan="2" bgcolor="#E0E0E0" class="details" style="display:none;">
    
  • Change the your toggle function to something like:

     function toggle_it(id_nr)
     { 
       $('#talenttable_'+ id_nr + ' .details').toggle();
       $('#talenttable_'+ id_nr + ' .overview').toggle();
      } 
    
  • Optional you can also get rid of the bgcolor and style attributes and put this information into the classes.
于 2013-04-23T09:36:23.597 回答