jQuery, Hover-Methode und Schließung

Question

Habe gekämpft mit Javascript Schließung für eine Weile versucht, Gehirn um Funktion Bereiche wickeln, aber ich denke, sie wickeln um mich stattdessen. Ich habe auf eine Reihe von Beiträgen (Nyman's war die hilfreichste) angesehen, aber offensichtlich immer noch nicht bekommen es. Versuchen Sie, eine Schleife über die Hover-Methode in jQuery laufen. Brauchen Sie Hover-Funktionen, um ultimative Trigger mehr als eine Aktion jeder, aber wäre glücklich, um sie arbeiten mit einem einzigen Bild-Swap jeder für jetzt zu erhalten.

$(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

}); 

Versucht die Idee der Verwendung einer anonymen Funktion für Scoping von einem anderen jQuery Post. Scheint OK zu arbeiten, aber wirft eine undefinierte für den Array-Wert in der ersten Hover-Funktion, ich denke, weil es eine innere Funktion ist (hardcoded Bildquellen arbeiten korrekt dort).

Answer 1

Es gibt in der Tat ein Problem mit Ihren Verschlüssen, und das hat mit Ihrer Verwendung der var zu tun i . Da Ihre anonyme Funktion keine lokale Version von i verwendet er die Version der darüber liegenden Funktion. Wenn sie jedoch versucht, auf i zu einem späteren Zeitpunkt, i == 11 (denn dadurch wurde die Schleife abgebrochen). Um dies zu beheben, müssen Sie eine lokale Version von i in jeder anonymen Funktion, etwa so:

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

Außerdem gibt es ein kleines Problem in Ihrem Code, das Sie sicherheitshalber beheben sollten. Sie greifen nicht korrekt auf Ihre lokalen Variablen zu; Sie sollten verwenden:

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

Ohne das "var" deklarieren Sie globale Variablen und greifen auf diese zu. (Wenn dies Ihr beabsichtigtes Verhalten ist, entschuldige ich mich.)