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 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，这样另一个休眠形式就不会被触发。

    $("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，但我不知道页面的其余部分是什么样的）

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

3 个答案: