html页面上的多个按钮逐步而不是同时显示文本？

Question

尝试创建一个包含大约 7 个问题的列表，并单击每个问题旁边的答案按钮。 唯一的问题是当我单击一个按钮时，它会运行整个 js 代码并显示所有答案，而不仅仅是那个特定的答案。

这是我的代码

<table>
  <tr>
    <td>Question 1 </td>
    <td class = "aligncenter">
      <form action="javascript:void(0);">

        <div id="reveal-space"> 
          <input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>

        </div>
      </form>

      <script>

      $("form").submit(function() {

        $("#reveal-space").text("Answer 1").show();
          return true;

        });
      </script>

    </td>
  </tr>

  <tr>
    <td>Question 2</td>
    <td class = "aligncenter">
      <form action="javascript:void(0);">

        <div id="reveal-space1"> 
          <input type="submit" name="b2" value="2" class="submitbutton aligncenter"/>

        </div>
      </form>

      <script>

      $("form").submit(function() {

        $("#reveal-space1").text("Answer 2").show();

          return true;

        });
      </script>
    </td>
  </tr>

  <tr>
    <td>Question 3</td>
    <td class = "aligncenter">
      <form action="javascript:void(2);">

        <div id="reveal-space2"> 
          <input type="submit" name="b3" value="3" class="submitbutton aligncenter"/>

        </div>
      </form>

      <script>

      $("form").submit(function() {

        $("#reveal-space2").text("Answer 3").show();

          return true;

        });
      </script>

    </td>
  </tr>

  <tr>
    <td>Question 4</td>
    <td class = "aligncenter">
      <form action="javascript:void(0);">

        <div id="reveal-space3"> 
          <input type="submit" name="b4" value="4" class="submitbutton aligncenter"/>

        </div>
      </form>

      <script>

      $("form").submit(function() {

        $("#reveal-space3").text("Answer 4").show();


          return true;

        });
      </script>
    </td>
  </tr>
</table>

我该如何修复它以使单击“1”按钮时不会向其他按钮显示文本？ 我可能需要采取完全不同的方法

提前感谢您的帮助

Answer 1

您的表单需要唯一 ID，因为当您设置表单提交功能时，$("form") 会选择您的所有表单。

尝试改变

  <form action="javascript:void(0);">

    <div id="reveal-space"> 
      <input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>

    </div>
  </form>

  <script>

  $("form").submit(function() {

    $("#reveal-space").text("Answer 1").show();
      return true;

    });
  </script>

到

  <form id="form1" action="javascript:void(0);">

    <div id="reveal-space"> 
      <input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>

    </div>
  </form>

  <script>

  $("#form1").submit(function() {

    $("#reveal-space").text("Answer 1").show();
      return true;

    });
  </script>

变化是 id="form1" 和 $("#form1")

Answer 2

略有不同的方法：您可以在表单元素中的隐藏 div 中加载所有答案，并通过查找与调用提交函数的表单相关的这些 div 来选择性地显示这些 div，以便其他休眠表单不会被触发。

    $("form").submit(function() {
        $(this).find("#answer").show();
        $(this).find("#reveal-space").hide();
    });

好处：你不需要唯一的ID，你只需要一个提交函数，文本不必包含在jQuery中。

jsFiddle

Answer 3

<table id="QnA">
 <tr>
  <td>Question 1</td>
  <td class = "aligncenter">
   <input type="button" value="Show Answer" data-answer="Answer goes here" class="submitbutton aligncenter"/>
  </td>
 </tr>
</table>

<script type="text/javascript">
$("#QnA :input").on("click", function() {
 $(this).parent().html($(this).data("answer"));
});
</script>

您不需要表单或任何提交，只需使所有内容都具有自引用性（实际上您可能甚至不需要该表上的 ID，但我不知道您页面的其余部分是什么样的） .