1

问题：

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

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

4

2 回答 2

2

问题是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);
};
于 2013-08-12T18:56:35.013 回答
1

问题很可能在这里关闭，试试这个：

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

function myClosure(menuYloc, name, i) {
  $(window).scroll(function(){
      var offset = menuYloc + $(document).scrollTop() + 'px';
      $(names[i]).animate({top:offset},{duration:0,queue:false});
  });
}

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')));
        myClosure(menuYloc, name, i);
    };
};

最有可能发生的情况是 的值i是恒定的，因此您的其他name,#header 永远不会绑定到您的动画。

于 2013-08-12T18:56:09.380 回答