如何使回复评论引用评论的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/>