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（）{}）位。如果确实有这样做的正确方法，请赐教我＆lt;。

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

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);
};

Answer 2

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

$(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`永远不会绑定到您的动画。

jQuery / javascript重构问题

问题：

原始代码：

重组代码

问题：

原因。

2 个答案: