Xml 到 Html 与不同路径之间的 xslt 依赖关系答案

【问题标题】：Xml to Html with xslt dependence between different pathXml 到 Html 与不同路径之间的 xslt 依赖关系
【发布时间】：2013-02-22 19:52:42
【问题描述】：

我正在尝试从 xml 文件开始动态生成调查问卷。问题是某些问题可能会根据其他答案显示或不显示。我不知道如何在html文件中插入这个依赖。我虽然在点击时插入一个 javascript 函数就足够了，但实际上我无法检索在这种情况下必须显示的问题。

这是我到目前为止的代码：

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="/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>

【问题讨论】：

标签： html xml xslt

【解决方案1】：

这应该可以解决问题：

<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 上运行时，会产生：

<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 默认隐藏子问题，onclick 处理程序中的 JavaScript 用于根据需要显示/隐藏问题。

【讨论】：