Question

我是新来的，刚开始学习javascript / jQuery，我有一些代码，但我认为它不是一个有效的代码，它太长了，有点重复同样的，你们也许可以制作一个更简单的代码版本吗？谢谢。

这里我附上了html图片：

        var sections = $('.section-page'), 
            sp = $('.sp'),
            sp2 = $('.sp2'),
            sp3 = $('.sp3');

        $(window).on('scroll', function () {
            var cur_pos = $(this).scrollTop();
            sections.each(function() {
                var top = $(this).offset().top - nav_height,
                    bottom = top + $(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                  nav.find('a').parent().closest('li').removeClass('current');
                  nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li').addClass('current');
                }
            });
            sp.each(function() {
                var top = $(this).offset().top - nav_height,
                    bottom = top + $(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                  nav.find('a').parent().closest('li').removeClass('current');
                  $('#cssmenu > ul > li:nth-child(7)').addClass('current');
                }
            });
            sp2.each(function() {
                var top = $(this).offset().top - nav_height,
                    bottom = top + $(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                  nav.find('a').parent().closest('li').removeClass('current');
                  $('#cssmenu > ul > li:nth-child(6)').addClass('current');
                }
            });
            sp3.each(function() {
                var top = $(this).offset().top - nav_height,
                    bottom = top + $(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                  nav.find('a').parent().closest('li').removeClass('current');
                  $('#cssmenu > ul > li:nth-child(3)').addClass('current');
                }
            });
        });

Answer 1

以这种方式进行优化，并记住它，

$(window).on('scroll', function () {
    var sections = $('.section-page'),
        sp = $('.sp'),
        sp2 = $('.sp2'),
        sp3 = $('.sp3');

    var cur_pos = $(this).scrollTop();
    sections.each(function () {
        var top = $(this).offset().top - nav_height,
                bottom = top + $(this).outerHeight();
        if (cur_pos >= top && cur_pos <= bottom) {
            nav.find('a').parent().closest('li').removeClass('current');
            nav.find('a[href="#' + $(this).attr('id') + '"]').parent().closest('li').addClass('current');
        }
    });
    $(".sp,.sp2,.sp3").each(function () {
        var cur_class = ($(this).hasClass("sp") ? "sp" : ($(this).hasClass("sp2") ? 'sp2') : 'sp3');
        var top = $(this).offset().top - nav_height;
        bottom = top + $(this).outerHeight();
        if (cur_pos >= top && cur_pos <= bottom) {
            nav.find('a').parent().closest('li').removeClass('current');
            switch (cur_class) {
                case "sp":
                    $('#cssmenu > ul > li:nth-child(7)').addClass('current');
                    break;
                case "sp2" :
                    $('#cssmenu > ul > li:nth-child(6)').addClass('current');
                    break;
                case "sp3":
                    $('#cssmenu > ul > li:nth-child(3)').addClass('current');
                    break;
            }
        }
    });

});

试一试，这应该有用。

Answer 2

您可以为重复4次的代码创建一个函数 - 您可以通过将参数传递给该函数来覆盖一些变体：

var sections = $('.section-page'), 
    sp = $('.sp'),
    sp2 = $('.sp2'),
    sp3 = $('.sp3');

$(window).on('scroll', function () {
    var cur_pos = $(this).scrollTop();

    function setCurrent(elem, child) {
        elem.each(function() {
            var top = $(this).offset().top - nav_height,
                bottom = top + $(this).outerHeight();
            if (cur_pos >= top && cur_pos <= bottom) {
                nav.find('a').parent().closest('li').removeClass('current');
                var li = child !== undefined
                    ? $('#cssmenu > ul > li:nth-child(' + child + ')')
                    : nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li');
                li.addClass('current');
            }
        });
    }

    setCurrent(sections); // second argument not passed => undefined child
    setCurrent(sp,  7);
    setCurrent(sp2, 6);
    setCurrent(sp3, 3);
});

如何简化代码jQuery（$）.each

2 个答案: