Javascript 使用for循环使JS更高效

我对JS和jQuery非常陌生。我一直在到处寻找并尝试不同的技术来提高代码的效率。基本上，我有一个菜单，可以帮助人们浏览页面。我的代码的一个部分确定了一个特定的

DIV

是否已被滚动到，然后从几个元素中添加/删除一些类。因为我不知道如何在内容区域内动态抓取锚定标记，所以我使用

section-#

的ID命名约定

---

因此，我希望

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

新代码：

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

$（函数（）{
$（窗口）。滚动（函数（）{
var windowpos=$（window.scrollTop（）；
$（“#jh滚动菜单li a”）.removeClass（“活动”）；
$（“.jh滚动菜单程序点”）.removeClass（“活动”）；
对于（变量i=1；i=$（“#节-”+i）.offset（）.top）{
$（“#jh滚动菜单li a”）.removeClass（“活动”）；
$（'a[href$=“#节-“+i+”）.addClass（“活动”）；
$（'a[href$=“#section-'+i+'].jh滚动菜单程序点”）.addClass（“活动”）；
}
}
});
});

，了解我要完成的任务。

$（“#jhcroller menu li a”）。removeClass（“active”）；

-每次迭代中都会删除该类，从而有效地撤消以前迭代中所做的任何操作

您可以通过这样做来避免固定的迭代次数（注意，我添加了一个CSS类，因为它比扫描href更有语义）：

var$contentLinks=$（'a.content-link'）；
对于（变量i=0；iwindowpos）{
$link.addClass（'active'）；
}
}

注意，通常不需要将

.active

添加到锚定点和包含的点，您可以使用嵌套选择器（

.active.jhcroller menu prog dot{…}

）重写点的css。同样出于这个原因，通常的惯例是在

上实际设置所有类，以便CSS/HTML更具可伸缩性；只需在表示项目的最顶层元素上添加一次。这样，后面的人就可以通过使用CSS重新设置

上和内部的所有内容的样式。

$（“#jhcroller menu li a”）.removeClass（“active”）；

-每次迭代中都会删除该类，从而有效地撤消了在以前迭代中所做的任何操作

您可以通过这样做来避免固定的迭代次数（注意，我添加了一个CSS类，因为它比扫描href更有语义）：

var$contentLinks=$（'a.content-link'）；
对于（变量i=0；iwindowpos）{
$link.addClass（'active'）；
}
}

---

注意，通常不需要将

.active

添加到锚定点和包含的点，您可以使用嵌套选择器（

.active.jhcroller menu prog dot{…}

）重写点的css。同样出于这个原因，通常的惯例是在

上实际设置所有类，以便CSS/HTML更具可伸缩性；只需在表示项目的最顶层元素上添加一次。这样，后面的人就可以通过使用CSS重新设置

上和内部的所有内容的样式。

”“我不认为我说得很对”：请详细说明。你错放了一些

“

。以下是您应该使用的内容：

'a[href$=“#section-'+i+'”]

（在if构造的

中有两次）。我将投票以“印刷错误”结束；我强烈建议您在scroll处理程序外部缓存一些DOM查找，并在事件处理程序内部使用缓存结果，即使您必须使用filter（）来获取特定元素。在滚动事件侦听器中执行的DOM查找越多（滚动触发次数越多），响应性就越差。当我更新代码以包含for循环时，不再重复仅更改一个数字的代码块，而是不再工作。因此，为了详细说明，我试图通过使用for循环来减少代码行数，但它似乎不像我想象的那样工作（根本不工作）。谢谢，@PeterB！这就成功了。我在我的引文中迷失了方向。“我认为我没有完全正确”：请详细说明。你错放了一些
”
。以下是你应该使用的：
'a[href$=“#section-'+I+'”]
（在if

构造的

中两次）。我将投票以“排版错误”结束。请注意；我强烈建议您将一些DOM查找缓存在scroll处理程序之外，并在事件处理程序内部使用缓存结果，即使您必须使用filter（）获取特定元素。在滚动事件侦听器中执行的DOM查找越多（滚动触发次数越多），响应性就越差。当我更新代码以包含for循环时，不再重复仅更改一个数字的代码块，而是不再工作。因此，为了详细说明，我正在尝试减少使用for循环编写代码，但它似乎不像我想象的那样工作（根本不工作）。谢谢，@PeterB！这就成功了。我在引用中迷失了方向。