フォームをその親の下にのみ表示させるにはどうすればよいですか？

コメント返信機能を作成していますが、返信フォームをユーザーが「返信」ボタンを押したときにその親の下に表示するようにしたいと思います。フォームをその親の下にのみ表示させるにはどうすればよいですか？

私のコードでは、特定の「親コメント返信ボタン」だけでなく、すべてのコメントの下にフォームが表示されます。他のコメントでフォームを避けるにはどうすればいいですか？

私のコードは次のようになります。

HTML

<head> 
     <?php 
     include ('headCont.php');?> 
    </head> 
    <body> 

     <?php 
     include('navBar.php');?> 

     <div class="container"> 

      <div class="row"> 
       <div class="box"> 
        <div> 
         <!------------container-------> 
         <form action="" method ="POST"> 
          Namn: <br> 
          <input type="text" name ="name"><br> 
          Kommentar: <br> 
          <textarea name="comment" placeholder="Ställ en fråga" rows="10" cols="20"></textarea><br> 
          <input type ="submit" name ="submit" value="Skicka"> 
         </form><br> 
        </div> 
        <div> 
         <?php 

         include ('commentBox/storeComments.php'); 
         include ('commentBox/getComments.php');?> 

        </div> 
       </div> 
      </div> 

     </div> 
     <!-- /.container --> 

     <footer> 
      <?php 
      include ('footer.php'); 
      ?> 
     </footer> 

     <!-- jQuery --> 
     <script src="jsOld/jquery.js"></script> 
    </body> 
</html> 

    <script> 
     $(document).ready(function(){ 
     $("#show").click(function(){ 
      $(".reply-form").show(); 
     }); 
     $("#hide").click(function(){ 
      $(".reply-form").hide(); 
     }); 
    }); 

</script>

getComments

<?php 
include ('connectDB.php'); 
if($connect){ 
    mysqli_select_db($connect, "comments"); 
    $query2 = "SELECT * FROM data ORDER BY `id` DESC"; 
    $result = mysqli_query($connect, $query2); 

    $comments = array(); 

    while($row = mysqli_fetch_array($result)){ 
     $name = $row['name']; 
     $comment = $row['comment']; 
     $date = $row['date']; 

     echo " 
        <div style='width:60%' class='col-lg-12'> 
         <div class='panel panel-default'> 
          <div class='panel-heading'> 
           <strong> $name </strong><span style='float:right'class='text-muted'>$date</span> 
          </div> 
          <div class='panel-body'>$comment 
           <button id='show' style='float:right'>Reply</button> 
          </div> 
         </div><!-- /panel panel-default --> 
        </div><!-- /col-sm-5 -->"; 

     echo "  <div class='col-lg-12 padd'> 
        <form method='POST' action='' class='reply-form'> 
         Namn:<br> 
          <input name='_method' type='text'</input><br> 
          Kommentar:<br> 
          <textarea name='reply_comment' cols='50' rows='10'></textarea> 
          <div class='button-group'> 
           <input type='submit' name='submit_reply' value='Skicka'></input> 
           <button id='hide' type='submit' name='close' value='Stäng'>Stäng</input> 
          </div> 
        </form> 
       </div>"; 
    } 
} 
?>

出力

出典

2016-12-02 ulr

親DOMの内部にフォームを作成する必要があります。つまり、あなたのsend echoステートメントの終わりに、次のようにする必要があります。 .reply-formは、最初はcssを使用して非表示にする必要があります。

</div><!-- /col-sm-5 -->";

出典

2016-12-02 14:06:26

HTML IDの表示と非表示はDOMに複数回表示できますが、HTML IDは一意である必要があります。したがって、クラスに変更するのが最善です。今

あなたがカウンターを追加しようとすることができ、あなたの質問に答えるために、これは基本的にショーボタン、例にフォームを接続します。

<button id='show' style='float:right' data-counter="0">Reply</button> 

<form method='POST' action='' class='reply-form reply-form-0'> 

$("#show").click(function(){ 
     var counter = $(this).data("counter"); 
     $(".reply-form-"+counter).show(); 
    });

出典

2016-12-02 14:22:19

フォームをその親の下にのみ表示させるにはどうすればよいですか？

答えて

関連する問題