javascript - Last element of a loop not getting acted as desired, for no apparent reason - Stack Overflow

admin管理员组

文章数量:1122846

In a scroll function, i want for a variable to get the id value of a element of a loop, under a certain condition, and after the loop, for that element to get its font-weight as bold. After another scroll event, the element choosen may change and the old one gets its font-weight back to normal.

The loop itself works well, the variable gets the id value, but after the loop, i cant get the last element of the loop to change its font weight when the variable gets its id value.

I can only get it to work if i hard-code it, but thats not a ideal solution.

I have tried other types of css, same problem. For some reason, if i take out the back to normal font-weight line, it does get to change its font-weight to bold. The debugger doesnt say anything.

This is the page code

<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>

This is the function, with the hard code part inactive

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');
                }
                */      
    })
    }); 
}

In a scroll function, i want for a variable to get the id value of a element of a loop, under a certain condition, and after the loop, for that element to get its font-weight as bold. After another scroll event, the element choosen may change and the old one gets its font-weight back to normal.

The loop itself works well, the variable gets the id value, but after the loop, i cant get the last element of the loop to change its font weight when the variable gets its id value.

I can only get it to work if i hard-code it, but thats not a ideal solution.

I have tried other types of css, same problem. For some reason, if i take out the back to normal font-weight line, it does get to change its font-weight to bold. The debugger doesnt say anything.

This is the page code

<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>

This is the function, with the hard code part inactive

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');
                }
                */      
    })
    }); 
}

• javascript
• jquery

Share Improve this question Follow asked yesterday AdatoAdato 11311 silver badge44 bronze badges New contributor Adato is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• 1 $("#meta" + i + "b") != assi looks very confusing. Are you sure it's supposed to be like that? – Lã Ngọc Hải Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

• first thing I would do is move the bold state logic outside of the loop, as it might be overwriting / over executing.
• the comparison of $("#meta" + i + "b") != assi is comparing an object with a string which wont work as expected.

a way I would approach this is to track the previous bold statement correctly.

function assinala(n) {
$(document).ready(function() {
    const style = `
        .highlight-bold { font-weight: bold; }
    `;
    $('<style>').text(style).appendTo('head');

    let currentHighlight = "#meta0b";
    $(currentHighlight).addClass('highlight-bold');

    $(window).scroll(function() {
        let previousHighlight = currentHighlight;

        for (let i = 0; i < n; i++) {
            if ($(window).scrollTop() >= $("#meta" + i).offset().top) {
                currentHighlight = "#meta" + i + "b";
            }
        }

        if (previousHighlight !== currentHighlight) {
            $(previousHighlight).removeClass('highlight-bold');
            $(currentHighlight).addClass('highlight-bold');
        }
    });
});

<!DOCTYPE html>
<html>
<head>
    <title>Scroll Highlight Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
        
        #barrl2 {
            position: fixed;
            top: 0;
            left: 0;
            background: white;
            padding: 10px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        #barrl2 span {
            margin-right: 20px;
            cursor: pointer;
        }
        
        #main3 {
            margin-top: 60px;
        }
        
        .tit1, .tit2 {
            height: 400px;
            margin: 20px 0;
            padding: 20px;
            background: #f0f0f0;
            border-radius: 4px;
        }

        .highlight-bold {
            font-weight: bold;
            color: #0066cc;
        }
    </style>
</head>
<body>
    <div id="barrl2">
        <span id="meta0b">Section 1</span>
        <span id="meta1b">Section 2</span>
        <span id="meta2b">Section 3</span>
        <span id="meta3b">Section 4</span>
        <span id="meta4b">Section 5</span>
        <span id="meta5b">Section 6</span>
    </div>
    
    <div id="main3">
        <div id="meta0" class="tit1">Section 1 Content</div>
        <div id="meta1" class="tit2">Section 2 Content</div>
        <div id="meta2" class="tit2">Section 3 Content</div>
        <div id="meta3" class="tit2">Section 4 Content</div>
        <div id="meta4" class="tit2">Section 5 Content</div>
        <div id="meta5" class="tit2">Section 6 Content</div>
    </div>
<script>
        function assinala(n) {
    $(document).ready(function() {
        const style = `
            .highlight-bold { font-weight: bold; }
        `;
        $('<style>').text(style).appendTo('head');

        let currentHighlight = "#meta0b";
        $(currentHighlight).addClass('highlight-bold');

        $(window).scroll(function() {
            let previousHighlight = currentHighlight;

            for (let i = 0; i < n; i++) {
                if ($(window).scrollTop() >= $("#meta" + i).offset().top) {
                    currentHighlight = "#meta" + i + "b";
                }
            }

            if (previousHighlight !== currentHighlight) {
                $(previousHighlight).removeClass('highlight-bold');
                $(currentHighlight).addClass('highlight-bold');
            }
        });
    });
}

   
        assinala(6);
    </script>
</body>
</html>

本文标签：