0

現在、XSLT (html) xml スタイル シートでいくつかのテーブル行を切り替えています。

最初に3つを非表示にする6つの行があり、onClickコマンドで1つの行を非表示にして他の3つを開きたいと思います。

これはそれがどのように見えるかです

オンロードxml

first row - Talents_Passive | Talent/Talent_Cost
second row - Prerequisite
third row - Action / Range / Cost
seventh row - Description

クリックすると // jQuery で 2 つの間を切り替えることができるはずです

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 イベントが実行されると 3 行目が非表示になりますが、4 行目、5 行目、6 行目は表示されません...

効果的には、行 2 を行 4、5、および 6 と交換する必要があります。

これが私の悩みの原因だと思います...

<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

問題は、生成された html に一意の ID がないことです。

各 ID にプレフィックスを追加する必要があります。例えば：

<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でこれを行う方法を更新します（1つの可能性）：

  • タレント テーブルに一意の 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();
  }
  • オプションで、bgcolor および style 属性を取り除き、この情報をクラスに入れることもできます。
于 2013-04-23T09:36:23.597 に答える