为什么JavaScript控制的回复表单仅第一行生效，如何实现多行显示？

错误原因 #

• 事件绑定逻辑错误：你将全局点击事件监听嵌套在了replyFunction()方法内，每次点击回复按钮都会新增一个重复的监听事件，逻辑冗余且会触发异常。
• 元素ID重复：PHP循环渲染多条评论时，所有回复按钮的data-target属性、回复表单的id属性都使用了固定值comment-2-reply-form，浏览器匹配ID时只会返回第一个出现的对应元素，所以只有第一行的表单能弹出。
• 冗余属性：回复按钮上同时加了onclick绑定和重复的id="reply-form"属性，会干扰正常逻辑。

修复步骤 #

1. 调整PHP渲染逻辑 #

循环输出评论时，使用每条评论在数据库中的唯一ID（比如comment_id）拼接生成唯一的表单ID和对应按钮的data-target值，示例PHP渲染代码参考：

<?php foreach ($comment_list as $item): ?>
<!-- 评论内容部分 -->
<button type="button" data-toggle="reply-form" data-target="comment-<?= $item['id'] ?>-reply-form" class="social_btn_rpl" >
  <span class="hover_social_rpl"> 
   回复
  </span>
</button>
<!-- 其他按钮部分 -->
<form method="POST"  class="reply-form  d-none" id="comment-<?= $item['id'] ?>-reply-form">
  <textarea  class="repley-input" placeholder="回复该评论" rows="4"></textarea>
  <button class="repley_button" type="submit">提交</button>
  <button class="repley_button" type="button" data-toggle="reply-form" data-target="comment-<?= $item['id'] ?>-reply-form">取消</button>
</form>
<?php endforeach; ?>

2. 替换JavaScript代码 #

删除原来的replyFunction，直接在全局绑定一次事件监听即可，不需要给按钮加onclick属性：

// 页面DOM加载完成后绑定一次全局监听即可
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(event) {
    const target = event.target;
    // 匹配点击的是回复/取消按钮，包含按钮内部的svg、span元素
    if (target.matches("[data-toggle='reply-form'], [data-toggle='reply-form'] *")) {
      // 向上查找最近的带data-target属性的触发元素
      const triggerEl = target.closest('[data-target]');
      const replyForm = document.getElementById(triggerEl.getAttribute('data-target'));
      if (replyForm) {
        replyForm.classList.toggle('d-none');
      }
    }
  }, false);
});

3. 清理冗余属性 #

删除所有回复按钮上的onclick="replyFunction()"和id="reply-form"属性，避免重复ID冲突。

调整后点击任意评论的回复按钮，都会弹出对应行的回复表单，点击取消按钮也可以隐藏对应表单。

内容的提问来源于stack exchange，提问作者elyar kk