Более эффективный способ написать этот Javascript (путевые точки)?

Question

Простите вопрос JS noob, но (пока мой код работает так, как ожидалось). Я уверен, что должен быть лучший/более эффективный способ его написать. Предложения приветствуются.

Вот что происходит: У меня есть меню Wordpress в одностраничной вертикальной теме прокрутки (обычай). Я использую waypoints.js, чтобы выделить соответствующую кнопку навигации для текущего видимого раздела, когда страница прокручивается вверх, вниз или при нажатии элемента навигации.

Я установил элемент домашней навигации в класс «активный» на загрузке страницы, и я выделил каждый раздел вручную, добавив/удалив «активный» класс на каждой путевой точке. Ради автоматизации этого немного, я попытался использовать $ this, а не div id, но пока не смог его исправить.

Заранее благодарим за любую помощь. Вот код в вопросе:

http://jsfiddle.net/vCP4K/

Мой текущий неуклюжий решение:

// Сделать домашняя кнопка активна на странице загрузки

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

// Изменить классы, так как divs попадают в путевую точку по пути DOWN или по щелчку

$('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}); 

// Изменение классов, как дивы хит точку на пути вверх или по щелчку

$('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'); 
}