javascript - jQuery/javascript 重构问题

Question

问题:

我刚开始使用 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(){}) 位中。如果真的有正确的方法，请赐教><。

任何帮助将不胜感激!谢谢。

Answer 1

问题是 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);
};