基于Vanilla JavaScript实现多元素动态翻页功能的技术问询

没问题，我给你整一个原生JS的动态翻页方案，完美适配你说的「多个独立翻页元素、每个元素页面数量不同」的需求，核心就是用每个容器自己的pageCount状态来控制.invisible类的添加/移除，逻辑清晰还不冲突。

完整实现代码 #

HTML结构示例 #

这里我写了两个不同页面数量的翻页容器，你可以直接复用这个结构：

<!-- 第一个翻页容器：3个页面 -->
<div class="pagination-container">
  <button class="prev-btn">← 上一页</button>
  <button class="next-btn">下一页 →</button>
  <div class="page">第1页内容</div>
  <div class="page invisible">第2页内容</div>
  <div class="page invisible">第3页内容</div>
</div>

<!-- 第二个翻页容器：2个页面 -->
<div class="pagination-container">
  <button class="prev-btn">← 上一页</button>
  <button class="next-btn">下一页 →</button>
  <div class="page">A页面内容</div>
  <div class="page invisible">B页面内容</div>
</div>

CSS样式 #

先定义.invisible类的隐藏规则：

.invisible {
  display: none;
}

/* 可选：给翻页容器加个样式区分 */
.pagination-container {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #eee;
}

JavaScript逻辑 #

这部分是核心，每个容器独立维护自己的pageCount，不会互相干扰：

// 获取所有翻页容器
const paginationContainers = document.querySelectorAll('.pagination-container');

// 遍历每个容器，初始化翻页逻辑
paginationContainers.forEach(container => {
  // 初始化当前页码（从0开始，对应第一个页面）
  let pageCount = 0;
  // 获取当前容器的所有页面元素
  const pages = container.querySelectorAll('.page');
  // 获取当前容器的前后按钮
  const prevBtn = container.querySelector('.prev-btn');
  const nextBtn = container.querySelector('.next-btn');
  // 总页数
  const totalPages = pages.length;

  // 切换页面的核心函数
  function switchPage() {
    // 遍历所有页面，给非当前页加.invisible，当前页移除
    pages.forEach((page, index) => {
      if (index === pageCount) {
        page.classList.remove('invisible');
      } else {
        page.classList.add('invisible');
      }
    });
  }

  // 上一页按钮点击事件
  prevBtn.addEventListener('click', () => {
    // 边界判断：不能小于0
    if (pageCount > 0) {
      pageCount--;
      switchPage();
    }
  });

  // 下一页按钮点击事件
  nextBtn.addEventListener('click', () => {
    // 边界判断：不能超过总页数-1
    if (pageCount < totalPages - 1) {
      pageCount++;
      switchPage();
    }
  });

  // 初始化时确保第一页显示（可选，因为HTML里已经默认加了.invisible）
  switchPage();
});

代码关键细节解释 #

• 独立状态管理：每个容器的pageCount是在forEach的闭包里定义的，不同容器的状态完全隔离，完美解决了你多个元素的需求。
• 边界判断：点击按钮时会检查pageCount是否在有效范围内（0到总页数-1），避免出现无意义的切换操作。
• 类切换逻辑：完全按照你的需求，通过添加/移除.invisible类来控制页面显示隐藏，没有额外的DOM操作，简洁高效。

可选扩展 #

如果你需要显示当前页码（比如“第2页/共3页”），可以在每个容器里加一个<span class="page-info"></span>，然后在switchPage函数里更新：

// 先在容器里获取这个元素
const pageInfo = container.querySelector('.page-info');
// 在switchPage里添加
pageInfo.textContent = `第${pageCount + 1}页/共${totalPages}页`;

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