2013-02-22 70 views
0

我想从xml文件动态地生成问卷。问题在于某些问题可能会根据其他答案显示或不显示。我不知道如何在html文件中插入这个依赖关系。我虽然在点击时插入一个javascript函数就足够了,但实际上我无法检索在这种情况下必须显示的问题。Xml到Html与不同路径之间的xslt依赖关系

这是我的代码至今:

XML:

<?xml version="1.0"?> 
<?xml-stylesheet type="text/xsl"?> 
<questions> 
    <question> 
    <number/> 
    <title>Which description best suits</title> 
    <options> 

     <option> 
     <checkbox> String 1</checkbox> 
     <questions/> 
     </option> 

     <option> 
     <checkbox> string 2 </checkbox> 
     <questions> 
      <question> 
      <number/> 
      <title> Hidden question ?</title> 
      <options> 

       <option> 
       <checkbox> Hidden string 1</checkbox> 
       <questions/> 
       </option> 

       <option> 
       <checkbox> Hidden string 2 </checkbox> 
       </option> 

      </options> 
      </question> 
     </questions> 
     </option> 

    </options> 
    </question> 
</questions> 

XSLT:

<xsl:stylesheet version = '1.0' 
    xmlns:xsl='http://www.w3.org/1999/XSL/Transform'> 

<xsl:template match="https://stackoverflow.com/questions/question"> 
<div id="question"> 
    <h6> <xsl:value-of select="//title"/> </h6> 
    <xsl:apply-templates select="child::options"/> 
</div> 
</xsl:template> 

<xsl:template match="*/questions/question"> 
<div id="question" style="visibility:hidden;"> 
    <h6> <xsl:value-of select="child::title"/> </h6> 
    <xsl:apply-templates select="child::options"/> 
</div> 
</xsl:template> 

<xsl:template match="options"> 
    <div id="options"> 
     <xsl:apply-templates select="child::option" /> 
    </div> 
</xsl:template> 

<xsl:template match="checkbox"> 
    <input type="checkbox"> 
    <xsl:value-of select="."/> 
    </input> 
</xsl:template> 

<xsl:template match="textinput"> 
    <p> <xsl:value-of select="."/> </p> 
    <input type="input"> 
    </input> 
</xsl:template> 

<xsl:template match="checkboxInput"> 
    <input type="checkbox"><xsl:value-of select="."/></input> 
    <input type="input"></input> 
</xsl:template> 

</xsl:stylesheet> 

回答

0

这应该做的伎俩:

<xsl:stylesheet version = '1.0' 
    xmlns:xsl='http://www.w3.org/1999/XSL/Transform'> 

    <xsl:template match='/'> 
    <html> 
     <head> 
     <title>Questions</title> 
     <script 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script> 
      function toggleQuestions(id, show) 
      { 
      var questions = $('#' + id); 
      if(show) 
      questions.show(); 
      else 
      questions.hide(); 
      } 
     </script> 
     <style> 
      .subQuestions 
      { 
      display: none; 
      } 
     </style> 
     </head> 
     <body> 
     <xsl:apply-templates select='questions/question' /> 
     </body> 
    </html> 
    </xsl:template> 
    <xsl:template match="questions/question"> 
    <xsl:param name="prefix" select="'question'" /> 

    <xsl:variable name="id" select="concat($prefix, '-', position())" /> 
    <div class="question" id="{$id}"> 
     <h6> 
     <xsl:value-of select="title"/> 
     </h6> 
     <xsl:apply-templates select="options"> 
     <xsl:with-param name="prefix" select="$id" /> 
     </xsl:apply-templates> 
     <xsl:apply-templates select="options/option[questions/question]" 
          mode="subQuestions"> 
     <xsl:with-param name="prefix" select="$id" /> 
     </xsl:apply-templates> 
    </div> 
    </xsl:template> 

    <xsl:template match="options"> 
    <xsl:param name="prefix" /> 
    <div class="options"> 
     <xsl:apply-templates select="option"> 
     <xsl:with-param name="prefix" select="$prefix" /> 
     </xsl:apply-templates> 
    </div> 
    </xsl:template> 

    <xsl:template match="option"> 
    <xsl:param name="prefix" /> 
    <xsl:apply-templates select="*[not(self::questions)]"> 
     <xsl:with-param name="prefix" select="$prefix" /> 
    </xsl:apply-templates> 
    </xsl:template> 

    <xsl:template match="checkbox" name="CheckBox"> 
    <xsl:param name="prefix" /> 
    <xsl:variable name="id" select="concat($prefix, '-', position())" /> 

    <input type="checkbox" > 
     <xsl:if test="../questions/question"> 
     <xsl:attribute name="onclick"> 
      <xsl:value-of 
      select="concat('toggleQuestions(&quot;', 
          $id, 
          '&quot;, this.checked)')" /> 
     </xsl:attribute> 
     </xsl:if> 
     <xsl:value-of select="."/> 
    </input> 
    </xsl:template> 

    <xsl:template match="textinput"> 
    <p> 
     <xsl:value-of select="."/> 
    </p> 
    <input type="input"> 
    </input> 
    </xsl:template> 

    <xsl:template match="checkboxInput"> 
    <xsl:param name="prefix" /> 

    <xsl:call-template name="CheckBox"> 
     <xsl:with-param name="prefix" select="$prefix" /> 
    </xsl:call-template> 
    <input type="input"></input> 
    </xsl:template> 

    <xsl:template match="option" mode="subQuestions"> 
    <xsl:param name="prefix" /> 
    <xsl:variable name="id" select="concat($prefix, '-', position())" /> 

    <div class="subQuestions" id="{$id}"> 
     <xsl:apply-templates select="questions/question"> 
     <xsl:with-param name="prefix" select="$id" /> 
     </xsl:apply-templates> 
    </div> 
    </xsl:template> 
</xsl:stylesheet> 

当运行在你的输入XML上,这个职业duces:

<html> 
    <head> 
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Questions</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script><script> 
      function toggleQuestions(id, show) 
      { 
      var questions = $('#' + id); 
      if(show) 
      questions.show(); 
      else 
      questions.hide(); 
      } 
     </script><style> 
      .subQuestions 
      { 
      display: none; 
      } 
     </style> 
    </head> 
    <body> 
    <div class="question" id="question-1"> 
     <h6>Which description best suits</h6> 
     <div class="options"><input type="checkbox"> String 1<input type="checkbox" onclick="toggleQuestions(&quot;question-1-1&quot;, this.checked)"> string 2 </div> 
     <div class="subQuestions" id="question-1-1"> 
     <div class="question" id="question-1-1-1"> 
      <h6> Hidden question ?</h6> 
      <div class="options"><input type="checkbox"> Hidden string 1<input type="checkbox"> Hidden string 2 </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html> 

的CSS默认隐藏的子问题,并在JavaScript中的onclick处理作为需要显示/隐藏的问题。