如何用JS实现评论回复

使用JavaScript实现评论回复功能可以按照以下步骤进行：

1. 在显示评论列表的每一条评论下方添加“回复”按钮或链接。

2. 点击“回复”按钮或链接时，使用JavaScript动态地创建一个回复表单，并将该表单添加到页面中。回复表单应该包含一个隐藏的字段，用于记录所回复的评论的ID。

3. 在提交回复表单时，使用JavaScript获取所填写的回复内容和所回复的评论的ID，并使用AJAX技术将它们提交到服务器端。

4. 在服务器端，将回复保存到数据库中，并将所回复的评论的ID记录在回复表中。

5. 在客户端，使用JavaScript动态地添加新回复信息到评论列表中，并将该回复信息缩进显示，以表示其是对某一条评论的回复。

下面是一个简单的实现示例：

// HTML代码
<div class="comment-list">
  <div class="comment">
    <p class="comment-author">张三</p>
    <p class="comment-content">这是一条评论。</p>
    <a href="#" class="reply-btn">回复</a>
    <div class="reply-form"></div>
    <ul class="reply-list"></ul>
  </div>
  <div class="comment">
    <p class="comment-author">李四</p>
    <p class="comment-content">这是另外一条评论。</p>
    <a href="#" class="reply-btn">回复</a>
    <div class="reply-form"></div>
    <ul class="reply-list"></ul>
  </div>
</div>

// JavaScript代码
// 获取回复按钮和回复表单
var replyBtns = document.querySelectorAll('.reply-btn');
var replyForms = document.querySelectorAll('.reply-form');

// 绑定回复按钮的点击事件
replyBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 隐藏其他回复表单
    replyForms.forEach(function(form) {
      form.style.display = 'none';
    });
    // 显示当前回复表单
    var form = this.parentNode.querySelector('.reply-form');
    form.style.display = 'block';
  });
});

// 绑定回复表单的提交事件
replyForms.forEach(function(form) {
  form.addEventListener('submit', function(event) {
    // 阻止表单的默认提交行为
    event.preventDefault();
    // 获取回复内容和所回复的评论的ID
    var content = this.querySelector('textarea').value;
    var commentId = this.parentNode.querySelector('.comment-id').value;
    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'reply.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析服务器返回的JSON数据
        var response = JSON.parse(xhr.responseText);
        // 创建新的回复元素
        var reply = document.createElement('li');
        reply.classList.add('reply');
        reply.innerHTML = '<p class="reply-author">' + response.author + '</p>' +
                          '<p class="reply-content">' + response.content + '</p>';
        // 将新回复元素添加到回复列表中
        var replyList = form.parentNode.querySelector('.reply-list');
        replyList.appendChild(reply);
        // 隐藏回复表单
        form.style.display = 'none';
      }
    };
    xhr.send('content=' + content + '&commentId=' + commentId);
  });
});

在上面的示例中，我们首先使用JavaScript获取了回复按钮和回复表单，并为回复按钮绑定了点击事件和回复表单绑定了提交事件。当用户点击回复按钮时，我们动态地显示当前评论的回复表单，并隐藏其他评论的回复表单。当用户提交回复表单时，我们发送一个AJAX请求到服务器端，将回复保存到数据库中，并返回一个JSON格式的响应。在客户端，我们解析服务器返回的JSON数据，并使用JavaScript动态地添加新的回复元素到回复列表中。