编写此 Javascript（航点）的更有效方法？

Question

请原谅 JS 菜鸟问题，但是（当我的代码按预期工作时）我确信必须有更好/更有效的方法来编写它。非常感谢您的建议。

以下是正在发生的事情： 我有一页垂直滚动主题（自定义）上有一个 Wordpress 菜单。当页面向上、向下滚动或单击导航项时，我正在使用 waypoints.js 突出显示当前可见部分的相应导航按钮。

我已将主页导航项设置为页面加载时的“活动”类，并通过在每个航点添加/删除“活动”类手动突出显示每个部分。为了稍微自动化一下，我尝试使用 $this 而不是 div id，但还不能正确处理。

提前感谢您的帮助。 这是有问题的代码：

http://jsfiddle.net/vCP4K/

我目前笨拙的解决方案：

// 在页面加载时激活主页按钮

$('li.home-btn a').addClass('active');

// 在 DOWN 或单击时，当 div 击中航路点时更改类

$('section#home').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.home-btn a').addClass('active');
}, {offset: -1}); 

$('section#services').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.services-btn a').addClass('active');
}, {offset: 1}); 

$('section#work').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.work-btn a').addClass('active');
}, {offset: 1}); 

$('section#about').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.about-btn a').addClass('active');
}, {offset: 1}); 

$('section#blog').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.blog-btn a').addClass('active');
}, {offset: 1}); 

$('section#contact').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.contact-btn a').addClass('active');
}, {offset: 1}); 

// 更改类，因为 div 在向上或单击时击中航路点

$('section#home').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.home-btn a').addClass('active');
}, {offset: -1}); 

$('section#services').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.services-btn a').addClass('active');
}, {offset: -1}); 

$('section#work').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.work-btn a').addClass('active');
}, {offset: -1}); 

$('section#about').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.about-btn a').addClass('active');
}, {offset: -1}); 

$('section#blog').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.blog-btn a').addClass('active');
}, {offset: -1}); 

$('section#contact').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.contact-btn a').addClass('active');
}, {offset: -1}); 

});

Answer 1

var sections = [];

// It'd be better if you used a classname for the section.
// Then you can select by classname rather than element name.
// E.g., if someone were to add a <section> tag elsewhere in the document,
// they would experience a bad bug.

$('section').each(function() {
  sections.push($(this).attr('id'));
});
$.each(sections, function(index) {
  var sectionDiv = $('#' + sections[index]);
  sectionDiv.waypoint(function(down) {
    activateSection(sections[index]);
  }, {offset: -1});
  sectionDiv.waypoint(function(up) {
    activateSection(sections[index]);
  }, {offset: -1});
})
function activateSection(sectionName) {  
    $('.nav li a').removeClass('active');
    $('li.' + sectionName + '-btn a').addClass('active');
}