如何重构jQuery滚动监听代码以适配任意数量带ID的元素？

首先给所有需要监听的元素添加一个统一类名（比如scroll-section），摆脱对带序号ID的依赖，不管元素数量增减都能适配。

重构后的代码 #

$(window).scroll(function() {
    const scrollTop = Math.floor($(window).scrollTop());
    // 按页面从上到下的顺序遍历目标元素
    $('.scroll-section').each(function() {
        const sectionTop = $(this).offset().top;
        if (scrollTop <= sectionTop) {
            console.log($(this).data('value'));
            return false; // 找到第一个符合条件的元素就终止遍历，和原逻辑一致
        }
    });
});

对应HTML结构调整 #

给每个目标div加上统一类：

<div id="div-1" class="scroll-section" data-value="值1"></div>
<div id="div-2" class="scroll-section" data-value="值2"></div>
<div id="div-3" class="scroll-section" data-value="值3"></div>
<!-- 后续新增div只需添加该类，无需修改JS代码 -->

优化说明 #

• 用类选择器替代硬编码ID，元素数量变化时无需改动JS
• 使用data()方法读取data-value属性，更符合jQuery处理自定义数据属性的最佳实践
• 给变量添加const声明，避免原代码中top未声明导致的全局变量污染
• 利用each()遍历+return false终止循环，逻辑和原代码的多分支判断完全对齐

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