javascript - 减少代码重复

Question

是否有更好的方法来减少代码重复？

也许以某种方式循环“pagesTop”数组？

以下函数在窗口滚动事件上初始化。

谢谢。

function redrawSideNav() {
    var pagesTop = new Array();
    $('.page').each(function(index, elem){
        pagesTop[index] = $(this);
    });

    $('.menu, .page').find('a').removeClass('active');
    if ( $(document).scrollTop() >= pagesTop[0].offset().top && $(document).scrollTop() < pagesTop[1].offset().top) {
        var target = '#' + pagesTop[0].attr('id');
        $('[href^="'+target+'"]').addClass('active');
    } else if ( $(document).scrollTop() >= pagesTop[1].offset().top && $(document).scrollTop() < pagesTop[2].offset().top) {
        var target = '#' + pagesTop[1].attr('id');
        $('[href^="'+target+'"]').addClass('active');
    } else if ( $(document).scrollTop() >= pagesTop[2].offset().top && $(document).scrollTop() < pagesTop[3].offset().top) {
        var target = '#' + pagesTop[2].attr('id');
        $('[href^="'+target+'"]').addClass('active');
    }  else if ( $(document).scrollTop() >= pagesTop[3].offset().top && $(document).scrollTop() < pagesTop[4].offset().top) {
        var target = '#' + pagesTop[3].attr('id');
        $('[href^="'+target+'"]').addClass('active');
    }   else if ( $(document).scrollTop() >= pagesTop[4].offset().top) {
        var target = '#' + pagesTop[4].attr('id');
        $('[href^="'+target+'"]').addClass('active');
    } 
}

Answer 1

嗯，下面的代码中似乎只有数字发生了变化，因此您可以使用带有break语句的for循环。当break get被触发时，for循环的其余部分将不会被执行。最后一个 else if(...) 是相同的，但没有最后一个条件。我们可以通过向pagesTop 附加一个虚拟元素来伪造这一点，这使得最后一个条件始终为真。

var a = {
    offset: function() {
        return {'top': 9999999999999};
    }
};
pagesTop.push( a );

for( var i = 0; i < pagesTop.length-1; i++ ) {
    if ( $(document).scrollTop() >= pagesTop[i].offset().top && $(document).scrollTop() < pagesTop[i+1].offset().top) {
        var target = '#' + pagesTop[i].attr('id');
        $('[href^="'+target+'"]').addClass('active');
        break;
    }
}