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 に答える