如何用JS统计其他页面的HTML类元素？静态家具站产品计数需求

背景 #

你有一个无数据库的静态家具作品集网站，包含4个产品品类，其中3个页面分别承载不同品类的产品（产品为手动添加的.product类Div），总计15-20个产品；需要在第4个页面展示所有品类的产品数量，且新增产品时菜单/统计页的计数能自动更新。现有代码仅支持单页内统计，需扩展为跨页面计数。

方法1：静态构建脚本（推荐，自动统计） #

适合手动维护产品的场景，通过简单脚本自动统计各页面产品数，生成全局可用的计数文件：

1. 给每个品类的产品Div添加品类标识类，比如办公椅加.cat-exec-chair、沙发加.cat-sofa，方便区分统计。
2. 创建Node.js脚本count-products.js：

const fs = require('fs');
const cheerio = require('cheerio');

// 配置页面路径与对应品类
const pages = [
  { path: './exec-chairs.html', category: 'exec-chair' },
  { path: './sofas.html', category: 'sofa' },
  { path: './tables.html', category: 'table' },
  // 第4个品类页面按需添加
];

const productCounts = {};

// 遍历页面统计品类数量
pages.forEach(page => {
  const html = fs.readFileSync(page.path, 'utf8');
  const $ = cheerio.load(html);
  productCounts[page.category] = $(`.product.${page.category}`).length;
});

// 计算总产品数
productCounts.total = Object.values(productCounts).reduce((sum, num) => sum + num, 0);

// 生成全局计数脚本文件
const countScript = `window.productCounts = ${JSON.stringify(productCounts)};`;
fs.writeFileSync('./product-counts.js', countScript);

3. 安装依赖：npm install cheerio --save-dev
4. 每次新增/删除产品后，运行脚本更新计数：node count-products.js
5. 在需要展示计数的页面（菜单、统计页）引用生成的脚本：

<script src="product-counts.js"></script>
<script>
  // 展示办公椅计数
  document.getElementById("Count_exec_chair").textContent = window.productCounts['exec-chair'];
  // 展示总产品数
  document.getElementById("Count_total").textContent = window.productCounts.total;
  // 其他品类同理
</script>

方法2：前端跨页面读取统计（纯静态无构建） #

无需额外脚本，通过前端fetch读取其他页面HTML并统计，适合不想用构建工具的场景：

1. 同样给产品添加品类标识类（.cat-exec-chair等）。
2. 在统计页/菜单页添加如下脚本：

<script>
  // 配置页面、计数元素ID、品类类名
  const countTargets = [
    { pageUrl: 'exec-chairs.html', countId: 'Count_exec_chair', categoryClass: 'cat-exec-chair' },
    { pageUrl: 'sofas.html', countId: 'Count_sofa', categoryClass: 'cat-sofa' },
    { pageUrl: 'tables.html', countId: 'Count_table', categoryClass: 'cat-table' }
  ];

  let totalCount = 0;

  // 遍历统计每个页面
  countTargets.forEach(target => {
    fetch(target.pageUrl)
      .then(res => res.text())
      .then(html => {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        const count = tempDiv.querySelectorAll(`.product.${target.categoryClass}`).length;
        document.getElementById(target.countId).textContent = count;
        totalCount += count;
        document.getElementById("Count_total").textContent = totalCount;
      })
      .catch(err => console.error(`读取页面失败: ${target.pageUrl}`, err));
  });
</script>

新增产品后无需额外操作，页面加载时会自动拉取其他页面数据统计。

方法3：手动维护计数文件（最简方案） #

因产品总数仅15-20个，可手动维护一个全局计数文件：

1. 创建product-counts.js：

window.productCounts = {
  'exec-chair': 5,
  'sofa': 6,
  'table': 4,
  'total': 15
};

2. 在需要展示计数的页面引用该文件，通过JS读取展示。每次增删产品时，手动修改文件内的数字即可。

单页统计代码优化 #

如果需要保留单页内的品类计数展示，可修改现有代码支持品类区分：

<script>
  // 统计当前页面所有产品
  const pageTotal = document.querySelectorAll('.product').length;
  document.getElementById("Count_page_total").textContent = pageTotal;

  // 统计当前页面某品类产品
  const execChairCount = document.querySelectorAll('.product.cat-exec-chair').length;
  document.getElementById("Count_exec_chair").textContent = execChairCount;
</script>

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