1

尝试通过单击以显示每个问题旁边的答案按钮来创建大约 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”按钮时不会向其他按钮显示文本？我可能需要采取完全不同的方法

我在这里先向您的帮助表示感谢

4

3 回答 3

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

于 2013-09-18T18:26:01.183 回答
0

您的表单需要唯一 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")

于 2013-09-18T18:00:08.807 回答
0

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

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

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

jsFiddle

于 2013-09-18T18:20:12.073 回答