减少代码重复

有没有更好的方法来做到这一点，以减少代码重复？减少代码重复

也许以某种方式循环'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'); 
    } 
}

来源

2013-10-20 Jason Norris

那么它会是一个良好的开端拉的$（document）.scrollTop（）伸到一个变量，只能做$（ '[^ HREF = “ '+目标+'”]'）。addClass（ '活性'）;最后在你制定出目标是什么之后 –

嘿，这是很好的忠告，谢谢！ –

好吧，似乎只有数字在下面的代码中发生了变化，所以你可以使用for-loop和break-statement。当中断get被触发时，for循环的其余部分将不会被执行。最后的是一样的，但没有最后的条件。我们可以通过向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; 
    } 
}

来源

2013-10-20 15:50:04 Sumurai8

必须把它给你背后的想法。如果不需要，停止执行循环并伪造最后一个条件，绝对精湛，谢谢！ –

做一步一步：

首先，我将创建一个变量$(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');

（未经测试..也许我提出了一些指标/语法错误。）

来源

2013-10-20 15:42:27 micha

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

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

来源

2013-10-20 15:47:01

嗯;你的代码比我的代码略好，但请在答案中添加一些解释。 – Sumurai8

希望现在变得更加清晰 –

减少代码重复

回答

相关问题