Question

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

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

在Windows滚动事件中初始化以下函数。

感谢。

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

一步一步地做：

首先，我要为$(document).scrollTop()创建一个变量，并替换if语句中的代码：

var scrollTop = $(document).scrollTop();
var targetIndex = null;

$('.menu, .page').find('a').removeClass('active');
if ( scrollTop >= pagesTop[0].offset().top && scrollTop < pagesTop[1].offset().top) {
    targetIndex = 0
} else if ( scrollTop  >= pagesTop[1].offset().top && scrollTop < pagesTop[2].offset().top) {
    targetIndex = 1;
} else if ( scrollTop  >= pagesTop[2].offset().top && scrollTop < pagesTop[3].offset().top) {
    targetIndex = 2;
}  else if ( scrollTop  >= pagesTop[3].offset().top && scrollTop < pagesTop[4].offset().top) {
    targetIndex = 3;
}   else if ( scrollTop  >= pagesTop[4].offset().top) {
    targetIndex = 4;
} 

var target = '#' + pagesTop[targetIndex].attr('id'); 
$('[href^="'+target+'"]').addClass('active');

之后，如果使用else if级联，我会开始构建一个循环：

var scrollTop = $(document).scrollTop();
var targetIndex = null;
for (var i = 0; i < 4 && !targetindex; i++) {
    if (scrollTop >= pagesTop[i].offset().top && scrollTop < pagesTop[i + 1].offset().top) {
         targetIndex = i;
    }
}
targetIndex = targetIndex || 4;
var target = '#' + pagesTop[targetIndex].attr('id'); 
$('[href^="'+target+'"]').addClass('active');

（未经测试..也许我做了一些索引/语法错误..）

Answer 2

以下代码适用于动态大小的数组：

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

与武士的不同回答：
而不是向数组添加一个虚构的项目，以保证循环至少执行一次，if语句的第二个条件总是为真，我在循环内检查当前元素是否是数组中的最后一项：如果是，则if语句中的第二个条件直接设置为true，否则条件设置为scrollTop <= pagesTop[i+1].offset().top

Answer 3

好吧，似乎只有下面代码中的数字发生了变化，所以你可以使用带有break语句的for循环。当break被触发时，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;
    }
}

减少代码重复

3 个答案: