Question

我正在寻找一个可以切换显示和隐藏的JavaScript按钮。它旨在揭示一列答案。

我的旧按钮效果很差，因为如果我想要40组按钮及其答案，我需要40个javascript文件。

我认为必须要对变量中的替换位进行通用化，但我不太了解javascript。

我还记录了html，以便在表格列中找到答案。

这是我设计的三张桌子。该按钮旨在仅显示该列中的所有答案。

这是（非表格）以前的代码：

（HTML）

<div>
    <h5>
        <button class="RevealToggle" id="RevealStage1Ex1"> Reveal Answer </button>
    </h5>
</div>
<ul>
    <li>
        <p> the passeport
            <textarea></textarea> <span class="AnswerStage1Ex1">le passeport</span>
        </p>
    </li>
    <li>
        <p>
            <textarea></textarea> <span class="AnswerStage1Ex1">la valise</span>
        </p>
    </li>
</ul>

（JS）

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

新表代码如下所示：

（HTML）

<td class="FrenchAnswerAlign">
    <h6><button class="RevealToggle" data-stage="1Ex1">Reveal Answer</button></h6>
    <div>
        <ul>
            <li><p>le passeport</p></li>
            <li><p>l'hôtel</p></li>
            <li><p>la valise</p></li>
            <li><p>une station</p></li>
            <li><p>une leçon</p></li>
            <li><p>un chéquier</p></li>
            <li><p>une personne</p></li>
            <li><p>les journalistes</p></li>
            <li><p>les prix</p></li>
            <li><p>de la bière</p></li>
            <li><p>du vin</p></li>
            <li><p>des lettres</p></li>
            <li><p>des autobus</p></li>
        </ul>
    </div>
</td>

目前，当我进行一项新练习时，我需要制作一个全新的JavaScript按钮文件，其中包含一个全新的ID，用于打开/关闭可见的答案。

Answer 1

ID必须是UNIQUE所以

var buttons = document.querySelectorAll("#RevealFrenchStage1Ex1");

应该只返回一个按钮。如果您将其更改为

<button class="RevealToggle" data-stage="1Ex1">

然后你可以使用

＆＃13;

window.onload = function() {
  var buttons = document.querySelectorAll(".RevealToggle");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
//      var answers = document.querySelectorAll(".Answer" + this.getAttribute("data-stage"));
//      for (var i = 0; i < answers.length; i++) {
//        answers[i].style.display = answers[i].style.display == "inline" ? "none" : "inline";
//      }
        var answer = document.querySelector("#Answer" + this.getAttribute("data-stage"));
        answer.style.display = answer.style.display == "inline" ? "none" : "inline";
    }
  }
}

＆＃13;

.answer {
  display: none
}

＆＃13;

<table>
  <tr>
    <td class="FrenchAnswerAlign">
      <h6><button class="RevealToggle" data-stage="1Ex1">Reveal Answer</button></h6>
      <div class="answer" id="Answer1Ex1">
        <ul>
          <li><p>le passeport</p></li>
          <li><p>l'hôtel</p></li>
          <li><p>la valise</p></li>
          <li><p>une station</p></li>
          <li><p>une leçon</p></li>
          <li><p>un chéquier</p></li>
          <li><p>une personne</p></li>
          <li><p>les journalistes</p></li>
          <li><p>les prix</p></li>
          <li><p>de la bière</p></li>
          <li><p>du vin</p></li>
          <li><p>des lettres</p></li>
          <li><p>des autobus</p></li> 
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td class="FrenchAnswerAlign">
      <h6><button class="RevealToggle" data-stage="1Ex2">Reveal Answer</button></h6>
      <div class="answer" id="Answer1Ex2">
        <ul>
          <li><p>le passeport</p></li>
          <li><p>l'hôtel</p></li>
          <li><p>la valise</p></li>
          <li><p>une station</p></li>
          <li><p>une leçon</p></li>
          <li><p>un chéquier</p></li>
          <li><p>une personne</p></li>
          <li><p>les journalistes</p></li>
          <li><p>les prix</p></li>
          <li><p>de la bière</p></li>
          <li><p>du vin</p></li>
          <li><p>des lettres</p></li>
          <li><p>des autobus</p></li> 
        </ul>
      </div>
    </td>


  </tr>
</table>

＆＃13;

javascript切换显示按钮，不需要40个相同按钮的40个javascript文件

1 个答案: