javascript - jQuery/javascript重组问题

问题：

我刚刚开始使用javascript / jQuery，但经验很少。我有可用的代码，但是经过一点重组，一切都消失了。

原始代码：

// Floating NavBar - Side
var names = ['#floatMenu','#header'];

for (var i = 0; i < names.length; i++){
    floatObj(names[i])
}

function floatObj(name)
{
    var menuYloc = null;
    $(document).ready(function(){
        menuYloc = parseInt($(name).css('top').substring(0,$(name).css('top').indexOf('px')));
        $(window).scroll(function(){
            var offset = menuYloc + $(document).scrollTop() + 'px';
            $(name).animate({top:offset},{duration:0,queue:false});
        });
    });
};

重组代码

$(document).ready(function(){
    floatObj();
});

function floatObj()
{
    var names = ['#floatMenu','#header'];
    var menuYloc = null;
    for (var i = 0; i < names.length; i++){
        menuYloc = parseInt($(names[i]).css('top').substring(0,$(names[i]).css('top').indexOf('px')));
        $(window).scroll(function(){
            var offset = menuYloc + $(document).scrollTop() + 'px';
            $(names[i]).animate({top:offset},{duration:0,queue:false});
        });
    };
};

题：

我想知道是否有人指出为什么这种方式的代码重组不起作用？我也想知道是否有一种无需任何附加组件即可调试javascript的方法？ （如果指出了明显的错误，也会很有帮助。）

原因。

我想以这种方式重新组织代码的原因是因为我还有一些其他的函数要在加载时运行。我认为我可以将所有功能都放入$（document）.ready（function（）{}）位。如果实际上有适当的方法，请启发我>
任何帮助将不胜感激！谢谢。

最佳答案

问题在于，i在调用传递给scroll的回调时具有在循环末尾（names.length）的值。

在您的第一个代码中，floatObj函数创建了一个存储names[i]值的范围。

大多数解决方案都涉及在for循环中调用函数。如果您不想调用命名的外部函数，则可以执行以下操作：

for (var i = 0; i < names.length; i++){
    (function(i){ // this stores i in the scope of this function
      menuYloc = parseInt($(names[i]).css('top').substring(0,$(names[i]).css('top').indexOf('px')));
      $(window).scroll(function(){
        var offset = menuYloc + $(document).scrollTop() + 'px';
        $(names[i]).animate({top:offset},{duration:0,queue:false});
      });
    })(i);
};