jQuery循环计数器答案

【问题标题】：jQuery looping counterjQuery循环计数器
【发布时间】：2013-11-27 20:35:39
【问题描述】：

我正在使用一个计数器来标记 1850 年到 2010 年之间的年份，我希望它以 10 年为增量递增。我正在尝试使用 div 触发 .html 交换。例如，当 '.infinite-container1' 距离顶部 350 像素时，假设计数器应该从 1850 变为 1860，而当 '.infinite.container5' 距离顶部 350 像素时，计数器应该从 1860 变为 1870 等等在。但是，我的代码或数学或两者都做错了，因为当第一个 div 通过 350px 时，它只会读取为 2170。帮忙？

for (var i = 1; i < 31; i=i+5){
    $('.infinite-container' + i).waypoint(function () {
        document.getElementById("year").innerHTML=(1850+10*i);
    }, {offset: 350});
}

【问题讨论】：

如果你使用jquery，为什么要使用document.getElementById？

标签： jquery loops counter jquery-waypoints

【解决方案1】：

这是很常见的范围问题。

waypoint() 调用请求时，i 的值是循环结束时的值。要保留该值，您可以创建新的作用域，该作用域将持有 i 声明值：

for (var i = 1; i < 31; i=i+5){
    (function(i) {
        $('.infinite-container' + i).waypoint(function () {
            document.getElementById("year").innerHTML=(1850+10*i);
        }, {offset: 350});
    })(i);
}

我建议阅读这篇博文：http://www.2ality.com/2013/05/quirk-variable-scope.html

【讨论】：