Question

以下是我的内容被显示/隐藏的概念。它也有效。 https://jsfiddle.net/mplungjan/a7Lfjsgh/

它适用于上面的小html代码。但是，当我将其应用于更大的HTML代码时，它不起作用。有人知道为什么吗？

我的目标是在揭示答案按钮上附加许多带有跨度的列表项。

HTML：

<nav class="Rightbox" id="RightFrench">       
<div id="Stage1">
<h1>Stage 1</h1>
<h5> <span class="HighlightBlue">Exercise 1 - </span></h5>
<h5><button class="AnswerTitle" id="AnswersFrenchStage1Ex1">Reveal Answers</button></h5>    

<p class="Task">
  <span class="HighlightBlue">Translate the following</span>
</p>
<ul>
<li>
 <p> the passeport <textarea></textarea>
    <span class="FrenchStage1Ex1">la passeport</span>
 </p>
</li>

<li>
 <p>the passeport <textarea></textarea>
   <span class="FrenchStage1Ex1">la passeport</span>
 </p>
 </li>
</div>
</nav>

使用Javascript：

window.onload = function() {
  var buttons = document.querySelectorAll(".AnswerTitle");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
      var id = this.id.replace(/reveal/, "FrenchStage");
      var answers = document.querySelectorAll("." + id);
      for (var i = 0; i < answers.length; i++) {
        answers[i].style.display = answers[i].style.display == "inline" ? "none" : "inline";
      }
    }
  }
}

CSS：

.Rightbox ul li p span {display:none;}

Answer 1

问题原来是我更改了按钮的ID，认为javascript没有使用按钮ID。结果

 var id = this.id.replace(/reveal/, "FrenchStage")

真的希望按钮的ID包含＆＃34;显示＆＃34;

javascript切换显示/隐藏按钮工作规模较小，但不适用于我较大的HTML代码

1 个答案: