点击按钮实现数据库行切换：显示下一行并删除上一行功能求助

我来帮你搞定这个「下一页」按钮的逐行切换需求！核心思路是跟踪当前显示的条目位置，每次点击按钮时先清空之前的内容，再加载并显示下一条评论，同时处理好边界情况（比如到最后一条时的提示）。下面分两种常见场景给你具体代码示例：

场景1：前端已加载所有评论数据 #

如果你的评论数据已经一次性从后端获取到前端，直接用数组索引切换即可：

// 假设已从后端拿到所有评论，存在这个数组里
const comments = [
  { id: 1, content: "第一条测试评论" },
  { id: 2, content: "第二条测试评论" },
  { id: 3, content: "第三条测试评论" }
];

// 跟踪当前显示的索引，初始为-1（还没显示任何内容）
let currentIndex = -1;
// 获取显示评论的容器和按钮元素
const commentDisplay = document.getElementById('comment-display');
const nextBtn = document.getElementById('next-page-btn');

nextBtn.addEventListener('click', () => {
  // 第一步：清空之前显示的内容
  commentDisplay.innerHTML = '';
  
  // 索引加1，切换到下一条
  currentIndex++;
  
  // 检查是否还有更多评论
  if (currentIndex < comments.length) {
    const currentComment = comments[currentIndex];
    // 渲染评论（可以根据你的需求自定义HTML结构）
    commentDisplay.innerHTML = `<div class="comment-card">
      <h4>评论ID：${currentComment.id}</h4>
      <p>${currentComment.content}</p>
    </div>`;
  } else {
    // 已经到最后一条，提示用户并禁用按钮
    commentDisplay.innerHTML = '<p style="color:#999;">没有更多评论啦 🎉</p>';
    nextBtn.disabled = true;
    nextBtn.style.opacity = '0.5';
  }
});

场景2：每次从后端获取单条评论（适合大数据量） #

如果评论数据很多，不想一次性加载，就每次点击按钮时从后端请求下一条：

let currentPage = 0; // 页码从0开始计数
const commentDisplay = document.getElementById('comment-display');
const nextBtn = document.getElementById('next-page-btn');

nextBtn.addEventListener('click', async () => {
  // 显示加载状态
  commentDisplay.innerHTML = '<p>加载中...</p>';
  currentPage++;
  
  try {
    // 发起请求到后端接口，带上页码参数（这里假设接口是/api/get-comment）
    const response = await fetch(`/api/get-comment?page=${currentPage}`);
    const result = await response.json();
    
    // 清空加载状态
    commentDisplay.innerHTML = '';
    
    if (result.success && result.comment) {
      // 渲染新获取的评论
      const comment = result.comment;
      commentDisplay.innerHTML = `<div class="comment-card">
        <h4>评论ID：${comment.id}</h4>
        <p>${comment.content}</p>
      </div>`;
    } else {
      // 没有更多评论了
      commentDisplay.innerHTML = '<p style="color:#999;">没有更多评论啦 🎉</p>';
      nextBtn.disabled = true;
      nextBtn.style.opacity = '0.5';
    }
  } catch (error) {
    // 请求失败的处理
    commentDisplay.innerHTML = '<p style="color:#f44;">加载失败，请点击重试</p>';
    // 页码回退，避免下次点击跳过内容
    currentPage--;
  }
});

后端配合要点（场景2） #

后端需要提供一个接口，根据传入的page参数返回对应位置的单条评论。比如用SQL查询的话：

-- 假设comments表是你的评论表，根据page计算偏移量
SELECT * FROM comments LIMIT 1 OFFSET ?;

这里的偏移量计算公式是 (page - 1) * 1（因为每次取1条），比如page=1时偏移0，取第一条；page=2时偏移1，取第二条，以此类推。

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