Question

我对JS和jQuery非常陌生。我一直在寻找并尝试不同的技术来使我的代码更高效。基本上，我有一个菜单，该菜单使人们在页面上向下移动。我的代码的一部分确定了是否已滚动到特定的DIV，然后从几个元素中添加/删除了一些类。由于我不确定如何在内容区域内动态获取锚标记，因此我使用的是section-#的ID命名约定。

因此，我希望只使用for循环可以使我的JS效率更高，而不是重复相同的代码块而只更改了一个数字，但是我认为我不太正确。 / p>

原始代码：

$(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");
            }
        }
    });
});

Here's a CodePen of the working menu，以了解我要完成的工作。

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添加到锚点和包含的点，您可以使用嵌套选择器（.active .jhscroller-menu-prog-dot {...}）重写点的CSS。同样出于这个原因，通常的约定是实际上在<li>上设置所有类，以便CSS / HTML具有更高的可伸缩性。只需将其添加到代表一个项目的最顶层元素上即可。这样，刚来的人就可以使用CSS重新设置<li>内和内部的所有样式。

使用for循环提高JS的效率

1 个答案: