1

各質問の横にクリックして回答ボタンを表示して、約7つの質問のリストを作成しようとしています. 唯一の問題は、1 つのボタンをクリックすると、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

わずかに異なるアプローチ: フォーム要素内の非表示の div にすべての回答を読み込み、submit 関数を呼び出したフォームに関連してそれらの div を見つけてそれらの div を選択的に表示し、他の休眠フォームがトリガーされないようにすることができます。

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

利点: 一意の ID は必要ありません。必要な送信関数は 1 つだけです。テキストを jQuery に含める必要はありません。

jsフィドル

于 2013-09-18T18:20:12.073 に答える
0

フォーム送信機能 $("form") を設定するとすべてのフォームが選択されるため、フォームには一意の 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") です

于 2013-09-18T18:00:08.807 に答える