Question

我试图用一些jQuery来浏览带有增量类的部分。但我的jQuery代码看起来不对。在控制台中有这条消息

TypeError: nextSection.offset(...) is undefined

这是我的密码：

for(var i = 0; i < 11; i++) {
    $('.project-' + i + '> .arrows > .arrow-bottom').click(function() {
        $('html, body').animate({
            scrollTop: $('.project-' + i+1).offset().top()
        }, 750);
    });

有人知道它为什么不起作用？

谢谢！

Answer 1

问题可能在于关闭，请尝试将代码更改为：

for (var i = 0; i < 11; i++) {
  (function(j) {
    $('.project-' + j + '> .arrows > .arrow-bottom').click(function() {
      $('html, body').animate({
        scrollTop: $('.project-' + (j + 1)).offset().top()
      }, 750);
    });
  }(i));
}

您可以参考这篇文章，了解有关关闭及其工作原理的更多信息， How do JavaScript closures work?

Answer 2

所有事件侦听器都将引用相同的i，每次都会增加（i成为边界11的点）。因此，当调用事件监听器时，他们将获得他们获得的i引用的值，对于所有这些引用将11。因此scrollTop: $('.project-' + i+1).offset().top()对于所有项目（我假设不是元素）将为scrollTop: $('.project-' + 12).offset().top()，因此offset将为undefined。

您可以使用 IIFE （我中间我 nvoked F 行动 E xpression）为每次迭代创建一个单独的闭包，因此事件监听器将具有如下唯一值：

for(var i = 0; i < 11; i++) {
    (function(index) { // index will be created for each iteration (new one every time)
        // instead of i use index
        $('.project-' + index + '> .arrows > .arrow-bottom').click(function() {
            $('html, body').animate({
                scrollTop: $('.project-' + index + 1).offset().top()
            }, 750);
        });
    })(i); // pass i to the call to initialize index of the IIFE
}

jQuery增加麻烦

2 个答案: