Сделайте JS более эффективным, используя цикл for

Question

Я очень плохо знаком с JS и jQuery.Я искал и пробовал разные методы, чтобы сделать мой код более эффективным.По сути, у меня есть меню, которое продвигает людей вниз по странице.В одном разделе моего кода указывается, прокручивается ли конкретный DIV, затем добавляются / удаляются некоторые классы из пары элементов.Поскольку я не уверен, как динамически захватывать теги привязки в области содержимого, я использую соглашение об именовании идентификаторов section-#.

Итак, вместо того, чтобы повторять один и тот же блок кода только с измененным числом, я надеялся, что цикл for поможет сделать мой JS более эффективным, но я не думаю, что у меня все в порядке.

Оригинальный код:

$(function() {
    $(window).scroll(function() {

        var windowpos = $(window).scrollTop();
        $("#jhscroller-menu li a").removeClass("active");
        $(".jhscroller-menu-prog-dot").removeClass("active");

        if (windowpos >= $("#section-1").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-1"]').addClass("active");
            $('a[href$="#section-1"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-2").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-2"]').addClass("active");
            $('a[href$="#section-2"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-3").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-3"]').addClass("active");
            $('a[href$="#section-3"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-4").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-4"]').addClass("active");
            $('a[href$="#section-4"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-5").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-5"]').addClass("active");
            $('a[href$="#section-5"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-6").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-6"]').addClass("active");
            $('a[href$="#section-6"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-7").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-7"]').addClass("active");
            $('a[href$="#section-7"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-8").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-8"]').addClass("active");
            $('a[href$="#section-8"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-9").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-9"]').addClass("active");
            $('a[href$="#section-9"] .jhscroller-menu-prog-dot').addClass("active");
        }

        if (windowpos >= $("#section-10").offset().top) {
            $("#jhscroller-menu li a").removeClass("active");
            $('a[href$="#section-10"]').addClass("active");
            $('a[href$="#section-10"] .jhscroller-menu-prog-dot').addClass("active");
        }
    });
});

Новый код:

$(function() {
    $(window).scroll(function() {

        var windowpos = $(window).scrollTop();
        $("#jhscroller-menu li a").removeClass("active");
        $(".jhscroller-menu-prog-dot").removeClass("active");

        for (var i = 1; i <= 10; i++) {
            if (windowpos >= $("#section-" + i).offset().top) {
                $("#jhscroller-menu li a").removeClass("active");
                $('a[href$="#section-"' + i + ']').addClass("active");
                $('a[href$="#section-' + i + '] .jhscroller-menu-prog-dot').addClass("active");
            }
        }
    });
});

Вот кодовая ручкарабочее меню , чтобы понять, чего я пытаюсь достичь.

Answer 1

$("#jhscroller-menu li a").removeClass("active"); - Вы всегда удаляете класс в каждой итерации, фактически отменяя все, что вы делали в предыдущих итерациях.

Вы можете избежать фиксированного числа итераций, выполнив (заметьте, я добавляю класс CSS, потому что он имеет более семантический смысл, чем сканирование на href): <a class="content-link" href="#anything" />

var $contentLinks=$('a.content-link');
for(var i=0; i<$contentLinks.length; i++){  // More efficient than .each()
    var $link=$($contentLinks[i]);
        $section=$($link.attr('href'));
    if($section.offset().top>windowpos){
        $link.addClass('active');
    }
}

Обратите внимание, что обычно нет необходимости добавлять .active как к якорю, так и к содержащимся точкам, вы можете переписать CSS для точек, используя вложенный селектор (.active .jhscroller-menu-prog-dot {...}). Также по этой причине обычное соглашение состоит в том, чтобы фактически установить все классы на <li>, чтобы CSS / HTML был более масштабируемым; просто добавьте его один раз на верхний элемент, представляющий элемент. Таким образом, кто-то, кто придет за вами, может перекомпилировать все на и внутри <li>, просто используя CSS.