如何使回覆評論引用評論的ID在論壇

Question

我一直在爭奪這片的代碼小時，沒有任何進展。任何人都可以幫助我解決這個問題嗎？ 我正在使用我網站上的論壇頁面，提供對評論功能的評論和回覆。 點擊每個評論下的回覆按鈕，textarea會動態顯示回覆。回覆被插入數據庫，回覆ID和原始評論ID（在回覆原始評論時生成的ID）。 我現在的挑戰是，答覆任何在論壇上的評論似乎只引用最新的評論的ID（可能是因爲回覆的形式是動態生成）。因此，在我的數據庫中，他們擁有最新評論的ID。這實際上意味着取回時，答覆將全部排隊在最新評論之下。我需要的是引用回覆的評論ID的方式。 這裏是我的PHP代碼：

<?php 
     require("includes/conn.php"); 
     $stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC"); 
      $stmt->execute(); 
      $result = $stmt->get_result(); 
      $num_of_rows = $result->num_rows; 
      if ($num_of_rows > 0){ 
       while ($row = $result->fetch_assoc()){ 
        $post_id = $row['post_id']; 
        $user = $row['user']; 
        $topic = $row['topic']; 
        $post = $row['post']; 
        $time = $row['time']; 
        $time = date('M dS, Y g:i A', strtotime($time)); 
        echo '<div> 
          <div> 
           <h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6> 
           <h5><strong>'.ucfirst($topic).'</strong></h5> 
           <p data-id="'.$post_id.'">'.$post.'</p> 
          </div>  
          <div> 
           <button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button> 
          </div> 
          <form id="comment_reply" data-id="'.$post_id.'" method="post" action=""> 
           <input type="text" class="hidden" value="'.$post_id.'" id="post_id"> 
           <input type="text" class="hidden" value="'.$user.'" id="user"> 
           <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea> 
           <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button> 
          </form> 
         <div/>'; 
        } 
       } 
    ?> 

我的阿賈克斯/ jQuery的位置：

$("form#comment_reply").hide();//Comment reply form hidden at page load 
//To hide reply button and show the reply form 
$(document).on('click', 'button.rep', function(e){ 
    e.preventDefault(); 
    var closestDiv = $(this).closest('div'); 
    var closestForm = $(closestDiv).next('form#comment_reply'); 
    $(closestDiv).fadeOut(); 
    $(closestForm).fadeIn(); 
}); 
//To process comment reply 
$(document).on("click", "form button#post_rep_sub", function(e){ 
     e.preventDefault(); 
    var reply = $("form textarea#post_rep").val(); 
    var name = $("input#user").val(); 
    var post_id = $("input#post_id").val(); 
    if (reply != ''){ 
     $.post('insert_post_reply.php', {'reply':reply, 'name':name, 'post_id':post_id}, function(data){ 
      if (data = 'yes'){ 
       $("form textarea#post_rep").val(""); 
       fetchCommentReply(); 
      } 
     }); 
    }else{ 
     return false; 
    } 
}); 

Answer 1

我認爲這個問題是在點擊處理程序「表單按鈕＃post_rep_sub」。

你這個說法閱讀POST_ID：var post_id = $("input#post_id").val();但這總是返回最後POST_ID無論哪個按鈕被按下。

爲了驗證我的觀點，你可以添加此觀察的JavaScript控制檯：

var test1 = $("input#post_id"); 
var test2 = $("input#post_id").length; 
console.log(test2); 

如果你看到一些> 1，那麼你知道修復點擊處理器「表單按鈕＃post_rep_sub」 。

Answer 2

的主要問題是，你的PHP代碼生成HTML元素（如按鈕）多次使用相同的ID！然後，jquery只附加到第一個按鈕。 這是已經在這裏爲例進行說明：

How jQuery works when there are multiple elements with the same "id"?

解決方案：用名稱屬性代替ID！

---

根據HTML規範，id屬性必須是唯一的頁面上（它不是一個標準的網頁設計/開發者剛剛發明）

Is using the same id multiple times on a page bad practice even when I am not parsing through the page?

---

讓我們來仔細看看你的php產生了什麼。您有多個具有相同ID的元素，例如，id =「but_rep」的按鈕會多次生成。請注意，您只能使用一個ID 一次只在HTML文件！ 因此，你不能假設jQuery可靠地使用一個ID來附加一個事件處理程序！

     <div> 
         <div> 
          <h5><strong>user 1</strong></h5><h6>'.$time.'</h6> 
          <h5><strong>topic 1</strong></h5> 
          <p data-id="101">post text1</p> 
         </div>  
         <div> 
          <button type="button" class="btxtn btn-primary rep" id="but_rep" data-id="101">Reply</button> 
         </div> 
         <form id="comment_reply" data-id="101" method="post" action=""> 
          <input type="text" class="hidden" value="101" id="post_id"> 
          <input type="text" class="hidden" value="user 1" id="user"> 
          <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea> 
          <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button> 
         </form> 
        <div/> 
        <div> 
         <div> 
          <h5><strong>user 2</strong></h5><h6>'.$time.'</h6> 
          <h5><strong>topic 2</strong></h5> 
          <p data-id="102">post text2</p> 
         </div>  
         <div> 
          <button type="button" class="btxtn btn-primary rep" id="but_rep" data-id="102">Reply</button> 
         </div> 
         <form id="comment_reply" data-id="102" method="post" action=""> 
          <input type="text" class="hidden" value="102" id="post_id"> 
          <input type="text" class="hidden" value="user 2" id="user"> 
          <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea> 
          <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button> 
         </form> 
        <div/>