Невозможно отключить прослушиватели событий для пунктов меню

Question

Я пытаюсь назначить некоторые прокрутки для меню для моего приложения с одной страницей, идея этого скрипта - не допустить повторения одного и того же кода снова и снова, но это не совсем так, как я этого хочу.

В основном происходит то, что destinations[i] становится неопределенным, и поэтому я не могу получить доступ к нему .dest. Когда я пытаюсь просто подключиться к журналу destinations[i], я получаю желаемый результат, но когда я затем нажимаю кнопки, я не могу прокрутить ни к чему, поскольку ничто не определено как значение .offset.

Почему после цикла нет значения destinations[i] и что я могу сделать, чтобы сделать эту работу по назначению?

var destinations = [ 
    {class: '.home', dest: $('html, body')}, 
    {class: '.lunch', dest: $('#menu-wrapper')}, 
    {class: '.catering', dest: $('#catering-wrapper')}, 
    {class: '.renting', dest: $('#renting-wrapper')}, 
    {class: '.karaoke', dest: $('#karaoke-wrapper')}, 
    {class: '.contact', dest: $('#site-footer')} 
], 
destLength = destinations.length, 
i; 

for (i = 0; i < destLength; i++) { 
    $(destinations[i].class + ' a').on('click', function() { 
    $('html, body').stop().animate({ 
     scrollTop: destinations[i].dest.offset().top 
    }, 1000); 
    }); 
} 

Answer 1

функции использование, они имеют объем вам необходим:

var destinations = [ 
    {"class": '.home', dest: $('html, body')}, 
    {"class": '.lunch', dest: $('#menu-wrapper')}, 
    {"class": '.catering', dest: $('#catering-wrapper')}, 
    {"class": '.renting', dest: $('#renting-wrapper')}, 
    {"class": '.karaoke', dest: $('#karaoke-wrapper')}, 
    {"class": '.contact', dest: $('#site-footer')} 
]; 

destinations.forEach(function(dest, i){ 
    $(dest['class'] + ' a').on('click', function() { 
     $('html, body').stop().animate({ 
     scrollTop: dest.dest.offset().top 
     }, 1000); 
    }); 
}); 

Foreach() также не оставляет никакого дополнительного ВАРА висит вокруг, дает индекс для вара бесплатно, не нуждается в длине, и выглядит немного чище для загрузки.

изменения: добавлен старый, то есть безопасный доступ проп для «класса», который является зарезервированным словом в JS ...

Answer 2

Я не могу сказать наверняка, не видя окружающий код, но если у вас есть var перед объявлением destinations и внутри цикла, то destinations удаляется как только петля казнены. См What is the purpose of the var keyword and when to use it (or omit it)?

Answer 3

Как @dandavis предположил, foreach() кажется более логичным, но на для вашего кода, когда вы цикл до destLength не дает количество элементов в destinations[], но элементы нумерация начинается с 0, так что вы должны использовать destLength-1

var destinations = [ 
    {class: '.home', dest: $('html, body')}, 
    {class: '.lunch', dest: $('#menu-wrapper')}, 
    {class: '.catering', dest: $('#catering-wrapper')}, 
    {class: '.renting', dest: $('#renting-wrapper')}, 
    {class: '.karaoke', dest: $('#karaoke-wrapper')}, 
    {class: '.contact', dest: $('#site-footer')} 
], 
destLength = destinations.length, 
i; 

for (i = 0; i < (destLength-1); i++) { 
    $(destinations[i].class + ' a').on('click', function() { 
    $('html, body').stop().animate({ 
     scrollTop: destinations[i].dest.offset().top 
    }, 1000); 
    }); 
}