如何简化代码 jQuery($) .each

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

How to Simplify Code jQuery($) .each

arrays

each

jquery

simplify