javascript函数仅适用于第一个元素

时间:2014-11-12 01:13:59

标签: javascript jquery html xslt

我有一个xsl文件,我可以让它在点击功能中显示标题,但我只能显示第一个标题,其他人保持隐藏状态,无论什么按钮都显示第一个标题调用该函数。该功能在按下后也不会隐藏按钮,因此功能和特定线路一定有问题?我也是用互联网资源管理器打开这个..

    <script language="javascript">
      function ShowTitle(title, btn)
      {
      document.getElementById("title").style.display = 'inline'
      title.style.display = 'inline'
      btn.style.display = 'none'
      }
    </script>

    <body>

      <xsl:for-each select="/questions/question/movie[position() >1]">

        <div style="background-color:tan;color:black;">
          <span style="font-weight:bold">In What Movie Did They Say:
            <xsl:value-of select="quote"/> -
          </span>
          <input type="button" value="Show title" onclick="ShowTitle('title', this)"></input>
          <span id="title" style="display:none">
          <xsl:value-of select="title"/></span>
        </div>
        <div style="margin-bottom:1em;font-size:15pt">
        </div>
        <br/>

      </xsl:for-each>

1 个答案:

答案 0 :(得分:0)

正如OJay所述,问题在于,当您的XSL使用此id生成多个元素时,您正尝试按id检索元素。

您应该更改html的这一部分

<div style="background-color:tan;color:black;">
  <span style="font-weight:bold">In What Movie Did They Say:
    <xsl:value-of select="quote"/> -
  </span>
  <input type="button" value="Show title" onclick="ShowTitle(this)"></input>
  <span class="title" style="display:none">
    <xsl:value-of select="title"/>
  </span>
</div>

然后,您可以按如下方式更新ShowTitle方法:

function ShowTitle(btn) {
    // get the btn's parent element. In this case the div
    var btnParentDiv = btn.parentElement;  

    // use getElementsByClassName to retrieve the title
    // getElementsByClassName returns an array of elements. 
    // In this case this is an array of length == 1
    // we're just interested in the first result, so get it immediately
    var divTitleElement = btnParentDiv.getElementsByClassName('title')[0];


    // Set the selected element to be visible
    divTitleElement.style.display = 'inline'

    // hide the button as before        
    btn.style.display = 'none'
}

此代码可以缩短,但我已经分解了一些步骤以包含解释