jQuery, метод наведения и закрытие

Question

Некоторое время я боролся с закрытием Javascript, пытаясь обернуть мозг вокруг функциональных областей, но я думаю, что вместо этого они оборачиваются вокруг меня. Я просмотрел несколько постов (Найман был самым полезным), но, очевидно, до сих пор не получил его. Попытка запустить цикл над методом наведения в jQuery. Вам нужны функции наведения, чтобы в конечном итоге вызывать более одного действия, но мы были бы рады заставить их работать с одним обменом изображениями на данный момент.

$(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. Кажется, работает нормально, но выдает неопределенное значение для массива в первой функции наведения, я полагаю, потому что это внутренняя функция (жестко закодированные источники изображений работают правильно).

Answer 1

Существует действительно проблема с вашими замыканиями, и это связано с вашим использованием 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» вы объявляете и получаете доступ к глобальным переменным. (Если это ваше предполагаемое поведение, то я прошу прощения.)