3

関数スコープの周りに脳を包み込もうとしてしばらくの間Javascriptクロージャに苦労してきましたが、代わりにそれらが私の周りを包み込んでいると思います。私はいくつかの投稿を見てきましたが（Nymanのものが最も役に立ちました）、明らかにまだそれを取得していません。jQueryのhoverメソッドでループを実行しようとしています。それぞれ複数のアクションを最終的にトリガーするにはホバー関数が必要ですが、今のところ、それぞれ1つの画像スワップで機能させることができれば幸いです。

$(document).ready(function() {

    imageSource = []; 
    imageSource[0] = 'images/img0.png'  //load 0 position with "empty" png
    imgArea = [];

    for (var i=1; i<11; i++) {

        (function( ){  //anonymous function for scope

            imageSource[i] = 'images/img' + i + '.png';
            imgArea[i] = '#areamap_Img' + i;

            // running console.log here gives expected values for both

            $(imgArea[i]).hover(   //imgArea[i] (selector) works correctly here

                function() {
                    $('#imgSwap').attr('src',imageSource[i]);  // imageSource[i] is undefined here
                },
                function() {
                    $('#imgSwap').attr('src','images/img0.png');
                });

        })(); // end anonymous function and execute

    }; // for loop

});

別のjQuery投稿からのスコープに無名関数を使用するというアイデアを試しました。正常に機能しているように見えますが、最初のホバー関数の配列値に未定義がスローされます。これは内部関数であるためだと思います（ハードコードされた画像ソースはそこで正しく機能します）。

4

1 に答える 1

11

確かにクロージャーに問題があり、それは var の使用に関係していますi。無名関数には のローカル バージョンがないためi、その上の関数のバージョンを使用しています。iただし、後日アクセスしようとすると、 i== 11 (それが原因でループが終了したため)。iこれを修正するには、次のように、各無名関数でのローカル バージョンを宣言する必要があります。

for (var i=1; i<11; i++) {

    (function( ){  //anonymous function for scope                
            var index = i; // The important part!

            // It's not technically necessary to use 'index' here, but for good measure...
            imageSource[index] = 'images/img' + index + '.png';
            imgArea[index] = '#areamap_Img' + index;

            $(imgArea[index]).hover(

                    function() {
                            $('#imgSwap').attr('src',imageSource[index]);  // Here's where `index` is necesssary.
                    },
                    function() {
                            $('#imgSwap').attr('src','images/img0.png');
                    });

    })(); // end anonymous function and execute

}; // for loop

さらに、適切な対策のために修正する必要があるコードに小さな問題があります。ローカル変数に正しくアクセスしていません。あなたが使用する必要があります：

var imageSource = []; 
var imageSource[0] = 'images/img0.png'  //load 0 position with "empty" png
var imgArea = []

「var」がなければ、グローバル変数を宣言してアクセスしています。(これが意図した動作である場合は、お詫び申し上げます。)

于 2009-05-11T13:33:03.057 に答える