如何在Bootstrap轮播选中且页面处于#video区域时启动数字计数函数？

没问题，我来帮你搞定这个需求。我们需要结合Bootstrap的Scrollspy和轮播事件，加上条件判断，让计数函数只在指定场景下启动，还要避免重复触发。下面是具体的实现步骤和代码：

第一步：配置Scrollspy #

首先确保页面已经正确设置Scrollspy，这样才能检测用户是否滚动到了#video区域。在body标签上添加相关属性：

<body data-bs-spy="scroll" data-bs-target="#your-navbar-id" data-bs-offset="0" tabindex="0">
  <!-- 页面内容 -->
  <section id="video">
    <!-- Bootstrap轮播组件 -->
    <div id="your-carousel-id" class="carousel slide">
      <div class="carousel-inner">
        <div class="carousel-item selected active">
          <!-- 数字计数元素 -->
          <span class="count">2500</span>
        </div>
        <!-- 其他轮播项 -->
      </div>
    </div>
  </section>
</body>

注意data-bs-target要对应你的导航栏ID，保证Scrollspy能正常识别当前活跃的页面区域。

第二步：编写计数函数与触发逻辑 #

我们先把计数逻辑封装成独立函数，再通过监听Scrollspy和轮播的事件，判断两个条件是否同时满足，满足时才启动计数。另外加个标记，防止计数动画重复执行。

// 标记计数是否已执行，避免重复触发
let hasCounted = false;

// 封装数字计数函数
function startCountAnimation() {
  if (hasCounted) return; // 已执行过则直接退出
  $('.count').each(function () {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 1500, // 动画时长可按需调整
      easing: 'easeInOutQuad',
      step: function (now) {
        $(this).text(Math.floor(now));
      }
    });
  });
  hasCounted = true; // 标记为已执行
}

// 监听Scrollspy的区域激活事件
$('body').on('activate.bs.scrollspy', function () {
  // 检查两个条件：当前在#video区域，且轮播选中项带有selected类
  const isInVideoSection = $('.nav-link.active').attr('href') === '#video';
  const hasSelectedCarouselItem = $('.carousel-item.selected').length > 0;

  if (isInVideoSection && hasSelectedCarouselItem) {
    startCountAnimation();
  }
});

// 监听轮播切换事件，处理用户在#video区域内切换轮播的情况
$('#your-carousel-id').on('slid.bs.carousel', function () {
  const isInVideoSection = $('.nav-link.active').attr('href') === '#video';
  const currentItemHasSelected = $(this).find('.carousel-item.active').hasClass('selected');

  if (isInVideoSection && currentItemHasSelected && !hasCounted) {
    startCountAnimation();
  }
});

第三步：处理页面加载时的边界情况 #

如果用户刷新页面时已经处于#video区域，需要在页面初始化后检查一次条件：

$(document).ready(function() {
  // 加小延迟确保Scrollspy完成初始化
  setTimeout(() => {
    const isInVideoSection = $('.nav-link.active').attr('href') === '#video';
    const hasSelectedCarouselItem = $('.carousel-item.selected').length > 0;

    if (isInVideoSection && hasSelectedCarouselItem) {
      startCountAnimation();
    }
  }, 100);
});

如果需要支持用户离开#video区域后返回时重新触发计数，可以添加重置标记的逻辑：

$('body').on('deactivate.bs.scrollspy', function () {
  const deactivatedSection = $('.nav-link.active').attr('href');
  if (deactivatedSection === '#video') {
    hasCounted = false; // 离开#video区域后重置标记
  }
});

这样设置后，数字计数函数就只会在用户处于#video区域，且当前轮播项带有selected类的时候才会启动啦！

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