javascript - 无法循环出菜单项的事件监听器

我正在尝试为我的一页应用程序的菜单分配一些滚动目标，该脚本的目的是防止自己一遍又一遍地重复相同的代码，但是这样做的方式并不理想。

基本上发生的是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);
    });
}

最佳答案

使用函数，它们具有您需要的范围：

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中的保留字...