양식을 부모 아래에만 표시하려면 어떻게합니까?

사용자가 "답장"버튼을 누를 때 답장 양식이 부모 밑에 나타나기를 원할 때 답장 기능을 만들고 있습니다.양식을 부모 아래에만 표시하려면 어떻게합니까?

지금 내 코드는 양식이 모든 "주석 - 답장 버튼"뿐만 아니라 모든 주석 아래에 표시되도록합니다. 다른 의견에 대한 양식을 어떻게 피할 수 있습니까?

내 코드는 다음과 같습니다

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 내에 양식을 만들어야합니다. 즉, 다음과 같은 메시지를 보내십시오. .reply-form은 CSS를 사용하여 처음에는 숨겨져 있어야합니다.

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

출처

2016-12-02 14:06:26

ID를 표시하고 숨기기, 당신의 DOM에 여러 번 나타날 HTML ID가 고유해야합니다 것을 명심 수있는 HTML. 따라서 클래스로 변경하는 것이 가장 좋습니다. 귀하의 질문은 당신이 카운터를 추가 할 수있는 대답 이제

, 이것은 기본적으로 쇼 버튼에 양식을 연결하는, 예 :

<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

양식을 부모 아래에만 표시하려면 어떻게합니까?

답변

관련 문제