采用js实现评论和回复

基础概念

评论和回复是用户生成内容（UGC）平台上的常见功能，允许用户对文章、视频或其他内容发表意见，并且可以对其他用户的评论进行回复。

类型

简单评论：用户对内容的直接评价。
嵌套回复：允许用户对特定评论进行回复，形成层级结构。

应用场景

社交媒体平台
博客网站
论坛
视频分享网站

实现方式

以下是一个使用JavaScript实现评论和回复的基本示例：

HTML结构

<div id="comments">
  <!-- 评论将动态加载到这里 -->
</div>
<form id="commentForm">
  <textarea id="commentText" placeholder="输入你的评论"></textarea>
  <button type="submit">提交评论</button>
</form>

JavaScript逻辑

document.getElementById('commentForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const commentText = document.getElementById('commentText').value;
  if (commentText.trim()) {
    addComment(commentText);
    document.getElementById('commentText').value = ''; // 清空输入框
  }
});

function addComment(text, parentId = null) {
  const commentsDiv = document.getElementById('comments');
  const commentElement = document.createElement('div');
  commentElement.classList.add('comment');

  if (parentId) {
    // 如果是回复，则添加到对应的评论下
    const parentComment = document.querySelector(`.comment[data-id="${parentId}"]`);
    const repliesDiv = document.createElement('div');
    repliesDiv.classList.add('replies');
    repliesDiv.appendChild(commentElement);
    parentComment.appendChild(repliesDiv);
  } else {
    // 否则直接添加到评论列表
    commentsDiv.appendChild(commentElement);
  }

  const textElement = document.createElement('p');
  textElement.textContent = text;
  commentElement.appendChild(textElement);

  // 添加回复按钮
  const replyButton = document.createElement('button');
  replyButton.textContent = '回复';
  replyButton.addEventListener('click', function() {
    const replyText = prompt('请输入你的回复:');
    if (replyText) {
      addComment(replyText, commentElement.dataset.id);
    }
  });
  commentElement.appendChild(replyButton);

  // 设置评论的唯一标识
  commentElement.dataset.id = Date.now();
}