单击创建文本区域和多个元素以回复注释

Question

目前，我有一个PHP脚本，从数据库获取注释（com_text，名称等），我回响它们，对于每个结果，我也回响一个带有隐藏文本区域（从CSS）和多个输入字段的div（type='隐藏'），然后点击按钮（回复），我将文本区域的div从隐藏更改为在线，这样用户就可以键入并回复评论。Ex：

foreach($result as $r){
<div class='comments'>
echo"<p>$r['com_text']</p>";
<button> reply <button>
etc
</div>

<div class="reply_container>
<form>
<textarea></textarea>
<input type="hidden value="value_from_database" name="">
<input type="hidden value="" name="">
<button type="submit></button>
</form>
</div>
}

你知道每个评论的意思了，我还创建了一个隐藏的文本区域，让人们回复。

我的问题是：我可以动态地做这样的事情，这样我就不必为每个评论都创建这样的内容了吗？还是有更好的办法？

我的想法是创建另一个PHP脚本，在Ajax中添加类似的内容，这样做是正确的吗？

谢谢你。

Answer 1

所以我有一个单一的回复div，和多个评论。点击任何一个。评论div将触发我的监听器，它将填充回复div中的相关字段并显示它。这是你要找的东西吗？

$(".comments-pane").on("click", ".comment", function(){
  var el = $(this);
  var elID = $(this).attr("id");
  var elText = $(this).text();
  
  $(".reply_container")
     .find("h3")
       .text("Your reply to "+elText).end()
     .find(".comment_id")
       .val(elID).end()
     .show();
   });

.reply_container {
  display: none;
}
.comment {
  border-bottom: 1px solid #999;
  padding: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments-pane">
  <div class="comment" id="4042311">
    The first one
  </div>
  <div class="comment" id="4042313">
    A follow-up comment
  </div>
  <div class="comment" id="4042317">
    Yet a third comment.
  </div>
</div>
  
  
<div class="reply_container">
  <h3></h3>
<form>
<input type="hidden" name="comment_id">
<input type="text" value="" name="reply_text">
<button type="submit">Reply</button>
</form>
</div>