2


0

関数を反復処理するjQuery

jqueryにはかなり新しく、私が書いた関数に少し問題があり、https://stackoverflow.com/questions/1104321/how-to-assign-event-callbacks-iterating-an-array-in-に非常に似ていますjavascript-jquery [this]の問題、そしてそれが続くものであれば、どうやらクロージャーの問題があるようです。 Peter Baileyが上記のスレッドに入れたように、これは何が起こっているかです:

  1. いくつかの値を繰り返します

  2. 反復を使用するその反復で関数を定義/割り当てます 変数

  3. すべての関数が最後からの値のみを使用することを学びます 繰り返し。

  4. WTF?

これは私のコードです:

var pages=['home', 'about', 'events', 'info', 'qa', 'photos', 'contact'];

for (i in pages) {

    $link='"'+"[href$='gaction.php?page="+(pages[i])+"']"+'"';
    $source="/images/"+(pages[i])+".png";

    $($link).hoverIntent(function() {
        $('#logo_text').stop(true, true).fadeOut(
        0,
        function() {
            $('#logo_text').attr('src', $source).fadeIn('slow'); // swaps logo
        });
    }, function() {
        $('#logo_text').stop(true, true).pause(300).fadeOut(
        0,
        function () {
            $('#logo_text').attr('src', '/images/name.png').fadeIn('slow'); //swaps back
        });
    });
}

$ linkの定義はかなり乱雑ですが、そのビットは機能します。

この関数は、#logo_text内の画像を、マウスを重ねたリンクに応じたものに置き換えることを意図していますが、その終わりまでに、すべてのリンクが画像を「連絡先」(最後)に変更します。

他のスレッドからそれを修正する方法を本当に理解していなかったので、誰かがそれを助けることができれば素晴らしいでしょう!

1 Answer


2


jQuery.eachステートメントを使用するだけで、その構造によってクロージャーが作成されます。 次に、必ず `var`を使用して変数を宣言すると、すべてが設定されます。

var pages=['home', 'about', 'events', 'info', 'qa', 'photos', 'contact'];

$.each( pages, function(){
  var $link='"'+"[href$='gaction.php?page="+ this +"']"+'"';
  var $source="/images/"+ this +".png";

  ... rest of function untouched

});

関数を書き直すにはいくつかの方法がありますが、正直なところ、あなたのものがあなた(セレクター)のために働くなら、あなたは良いです。 のみ、 `fadeOut(0、function …​)`を使用する代わりに、 `hide()。attr( 'src'、$ source).fadeIn( 'slow')`を使用するだけです