如何在网页中动态统计并显示当前可见及总数的 figure 元素-js教程-PHP中文网

如何在网页中动态统计并显示当前可见及总数的 figure 元素

本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并实时显示当前视口内可见的 figure 序号（如“2/3”），支持滚动更新，适用于图文画廊、响应式图集等场景。

本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并实时显示当前视口内可见的 figure 序号（如“2/3”），支持滚动更新，适用于图文画廊、响应式图集等场景。

要实现「总数显示 + 当前可见项动态计数」功能，需分两步完成：静态总数渲染与滚动时的动态可见项检测。以下为完整、可直接运行的专业实现方案。

✅ 一、正确统计并插入总数显示

你原先的拼接字符串写法存在语法错误（+totalItems.join('') 无意义，且 totalItems 是数字而非数组）。jQuery 创建元素应使用对象字面量或链式方法：

const $container = $('.is-vertical');
const total = $container.find('figure').length;

// ✅ 推荐：语义清晰、安全可靠
$container.append($('<span>', {
  class: 'numbers',
  text: `1/${total}` // 初始默认显示第1项（可后续更新）
}));</span>

? 提示：建议添加 CSS 样式提升可读性，例如：

Codex Auth Cleaner
一款AI工具，主要用于Monitor and clean up invalid Codex authentication files in CPA. Check quota status, disable files returning 401 errors, and perform dual verification before deletion.，适合需要提升相关任务效率的用户。

下载
.numbers { 
  display: block; 
  font-size: 0.85em; 
  color: #666; 
  margin-top: 8px; 
  text-align: center; 
}

✅ 二、实时检测并更新“当前可见 figure”序号

仅靠 $(window).scrollTop() 不足以准确判断哪个

在视口内——需结合元素位置与滚动偏移综合计算。推荐使用 getBoundingClientRect() 判断是否部分可见（兼容性好、性能优）：

function updateCurrentIndex() {
  const $figures = $container.find('figure');
  const viewportHeight = window.innerHeight;

  for (let i = 0; i  20) {
      const currentIndex = i + 1; // 从1开始计数
      $('.numbers').text(`${currentIndex}/${total}`);
      return; // 只更新首个可见项（适合垂直流式布局）
    }
  }
  // 若无 figure 完全可见，回退显示最后一个（可选逻辑）
  if ($figures.length > 0) {
    $('.numbers').text(`${total}/${total}`);
  }
}

// 初始化 + 监听滚动
updateCurrentIndex();
$(window).on('scroll resize', _.throttle(updateCurrentIndex, 100)); // 使用 Lodash 防抖，或自行实现

⚠️ 注意事项：

若页面含大量 figure，建议添加 IntersectionObserver 替代 scroll 监听（更高效、原生支持）；

上述逻辑按首个进入视口的 figure作为“当前项”，符合多数图集交互预期；如需高亮完全居中或占比最大的项，可扩展 rect.height * visibleRatio 加权计算；

确保 DOM 加载完成后执行脚本（包裹在 $(document).ready(...) 或 DOMContentLoaded 中）。

✅ 三、完整可运行示例（含 HTML + JS）



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><style>
    .is-vertical { margin: 20px; }
    .is-vertical figure { margin: 30px 0; }
    .numbers { display: block; font-size: 0.9em; color: #555; text-align: center; }
  </style><div class="is-vertical">
    <figure><img src="data:image/svg+xml,%3Csvg%20   style="max-width:90%"%20  style="max-width:90%"%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23eee'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%201%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure><figure><img src="data:image/svg+xml,%3Csvg%20   style="max-width:90%"%20  style="max-width:90%"%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23ddd'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%202%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure><figure><img src="data:image/svg+xml,%3Csvg%20   style="max-width:90%"%20  style="max-width:90%"%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23ccc'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%203%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
</div>

  <script>
    $(function() {
      const $container = $('.is-vertical');
      const $figures = $container.find('figure');
      const total = $figures.length;

      // 插入总数初始状态（格式：1/3）
      $container.append($('<span>', {
        class: 'numbers',
        text: `1/${total}`
      }));

      function updateCurrentIndex() {
        const viewportHeight = window.innerHeight;
        for (let i = 0; i < $figures.length; i++) {
          const rect = $figures[i].getBoundingClientRect();
          if (rect.top < viewportHeight && rect.bottom > 20) {
            $('.numbers').text(`${i + 1}/${total}`);
            return;
          }
        }
        // 回退：若全部滚出，则显示最后一项
        $('.numbers').text(`${total}/${total}`);
      }

      // 初始化 + 绑定防抖滚动事件（简易防抖）
      updateCurrentIndex();
      let ticking = false;
      $(window).on('scroll resize', function() {
        if (!ticking) {
          requestAnimationFrame(() => {
            updateCurrentIndex();
            ticking = false;
          });
          ticking = true;
        }
      });
    });
  </script>

该方案兼顾简洁性与健壮性，无需第三方库即可投入生产。如需进一步增强体验（如平滑过渡、动画高亮、键盘导航支持），可在 .numbers 更新后添加 CSS transition 或集成 Waypoints 等专业库。