如何在每次点击按钮时只显示3条评论，然后再显示10条评论

实现每次点击按钮只显示3条评论再显示10条评论的功能，可以通过以下步骤来实现：

HTML布局：创建一个包含评论的容器，并在其下方添加一个按钮用于触发加载更多评论的操作。如下所示：

<div id="comment-container">
  <!-- 这里显示评论 -->
</div>
<button id="load-more-btn">加载更多评论</button>

JavaScript代码：使用JavaScript来实现按钮点击时加载评论的功能。代码如下：

// 定义评论数据，可以从后端获取或手动定义
var comments = [
  "评论1",
  "评论2",
  "评论3",
  "评论4",
  "评论5",
  // ...
];

// 定义当前显示的评论索引和每次加载的评论数量
var currentIndex = 0;
var loadCount = 3;

// 获取评论容器和加载更多按钮的DOM元素
var commentContainer = document.getElementById("comment-container");
var loadMoreButton = document.getElementById("load-more-btn");

// 加载评论的函数
function loadComments() {
  // 清空评论容器
  commentContainer.innerHTML = "";

  // 计算需要显示的评论的结束索引
  var endIndex = currentIndex + loadCount;

  // 遍历评论数组，显示需要的评论
  for (var i = currentIndex; i < endIndex && i < comments.length; i++) {
    var comment = document.createElement("p");
    comment.textContent = comments[i];
    commentContainer.appendChild(comment);
  }

  // 更新当前显示的评论索引
  currentIndex = endIndex;

  // 检查是否还有更多评论可供加载
  if (currentIndex < comments.length) {
    loadMoreButton.style.display = "block";
  } else {
    loadMoreButton.style.display = "none";
  }
}

// 绑定加载更多按钮的点击事件
loadMoreButton.addEventListener("click", loadComments);

// 初始加载评论
loadComments();