采用js实现评论和回复

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

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();
}