循环最后一个元素无法按预期设置字体加粗的问题求助

我现在遇到一个滚动监听的问题，想实现的效果是：当页面滚动时，根据滚动位置匹配对应的元素，把顶部导航栏里的对应<span>设置为加粗，同时之前被加粗的元素要恢复正常字体粗细。

目前循环逻辑能正常拿到目标元素的ID，但只要保留了恢复正常字体的代码，目标元素就无法被加粗；删掉那行恢复的代码，加粗就正常工作。调试工具也没报任何错误，硬编码的话是能正常生效的，但这显然不是理想方案。

先贴一下页面结构：

<div id="barrl2">
    <span id="meta0b">properties</span>
    <span id="meta1b">properties</span>
    <span id="meta2b">properties</span>
    <span id="meta3b">properties</span>
    <span id="meta4b">properties</span>
    <span id="meta5b">properties</span>
</div>
<div id="main3">
    <div id="meta0" class="tit1">properties</div>   
    <div id="meta1" class="tit2">properties</div>
    <div id="meta2" class="tit2">properties</div>
    <div id="meta3" class="tit2">properties</div>   
    <div id="meta4" class="tit2">properties</div>
    <div id="meta5" class="tit2">properties</div>
</div>
        
<script>
    assinala(6);
</script>

然后是我的JavaScript代码（硬编码部分已经注释掉了）：

function assinala(n) {
    $(document).ready(function(){
    assi = "#meta0b";
    $(assi).css('font-weight', 'bold');
    $(window).scroll(function () {  
            for (let i = 0; i < n; i++) {           
                if ($(window).scrollTop() >= $("#meta" + i).offset().top) {
                    assi = "#meta" + i + "b";
                    }
                    $(assi).css('font-weight', 'bold');
                    if ($("#meta" + i + "b") != assi) {
                        $("#meta" + i + "b").css('font-weight', 'normal');        
                    }                       
        }
        /*
        if ($(window).scrollTop() >= $("#meta5").offset().top) {
                $("#meta5b").css('font-weight', 'bold');
                }
                */      
    })
    }); 
}

问题点分析 #

我发现你代码里的核心问题出在循环内的逻辑顺序和判断条件上：

1. 判断条件完全错误：if ($("#meta" + i + "b") != assi) 这里你是把jQuery对象（$("#metaXb")返回的是jQuery包装对象）和字符串ID（#metaXb）做比较，类型都不一样，结果永远是true。这就导致每次循环都会把当前迭代的<span>设为normal，哪怕它就是我们要加粗的目标元素。
2. 逻辑顺序混乱：你在循环里边判断边修改样式，最后循环结束时，目标元素可能被后面的迭代步骤又改回normal了，所以看起来没生效。

修复方案 #

我们换个更清晰的思路：每次滚动时，先统一重置所有导航<span>的样式，再单独给匹配的目标元素设置加粗，这样就不会有冲突了：

方案1：直接操作样式

function assinala(n) {
    $(document).ready(function(){
        let activeId = "#meta0b";
        // 初始化第一个元素加粗
        $(activeId).css('font-weight', 'bold');

        $(window).scroll(function () {  
            // 1. 先把所有导航span的字体恢复正常
            $("#barrl2 span").css('font-weight', 'normal');
            
            // 2. 找到当前滚动位置对应的目标ID
            let targetId = activeId;
            for (let i = 0; i < n; i++) {           
                if ($(window).scrollTop() >= $("#meta" + i).offset().top) {
                    targetId = "#meta" + i + "b";
                }
            }
            
            // 3. 给目标元素设置加粗
            $(targetId).css('font-weight', 'bold');
            activeId = targetId;
        });
    }); 
}

方案2：用CSS类控制（更优雅，推荐）

先定义一个CSS类：

/* 加粗激活态的样式 */
.nav-active {
    font-weight: bold;
}

再修改JS代码：

function assinala(n) {
    $(document).ready(function(){
        const $navSpans = $("#barrl2 span");
        // 初始化第一个元素为激活态
        $navSpans.eq(0).addClass('nav-active');

        $(window).scroll(function () {  
            let targetIndex = 0;
            // 找到当前滚动位置对应的索引
            for (let i = 0; i < n; i++) {           
                if ($(window).scrollTop() >= $("#meta" + i).offset().top) {
                    targetIndex = i;
                }
            }
            
            // 移除所有元素的激活类，给目标元素添加
            $navSpans.removeClass('nav-active');
            $navSpans.eq(targetIndex).addClass('nav-active');
        });
    }); 
}

这样逻辑更清晰，样式和代码分离，也不会出现之前的冲突问题，你可以试试这个方案，应该能解决你的问题。

备注：内容来源于stack exchange，提问作者Adato