JQuery замыкания и функция события (mouseover, Mouseout, ...)

Question

Я пытаюсь понять, как использовать замыкания в связи с функциями событий jQuery.

Моя текущая проблема заключается в том, чтобы закруглить фигуры на экране и заставить их останавливаться и исчезать при наведении курсора мыши, а затем исчезать и перезапускать при наведении мыши. Я должен использовать карты изображений для создания круглой чувствительной области при наведении мыши. Хотя анимация работает нормально, у меня возникают проблемы с использованием замыканий в функции наведения мыши, как мне бы этого хотелось.

С учетом этой настройки:

(function($){
  $.fn.xyz = function( option ) {
    // override defaults with specified option
    option = $.extend( {}, $.fn.xyz.option, option );

  return this.each(function(index, element) {
            // run works fine.
            function run(index) {
                $(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) {
                    return function() {
                        run(i);
                }})(index));
            }

            //1 this version works great but I don't like the .parent().parent() especially as the animation requires 
            // just the ball I hover over gets the opacity assigned
            $("area").mouseover(
                function () {$(this).parent().parent().css('opacity', 0.5);}
            );

            //2 this version makes all balls transparent on page load
            $("area").mouseover(
                (function (activeElement) {
                    $(activeElement).css('opacity', 0.5);
                })(this)
            );

            //3 this version makes all balls transparent on the first mouse over event 
            $("area").mouseover(
                (function (activeElement) {
                    return function() {
                        $(activeElement).css('opacity', 0.5);
                    }
                })(this)
            );

            //4 also this version affecs all balls and not just the one that is mouse overed
            var activeBall = $(this);
            $("area").mouseover(function () {
                $(activeBall).css('opacity', 0.5);
            }).mouseout(function () {
                $(activeBall).css('opacity', 1);
            });

            run(index);
        });
    },

    $.fn.xyz.option = {};
})(jQuery);

Почему версии 2, 3 и 4 нацелены на все элементы, а не только на тот, который активно находится над ним. Как бы я использовал замыкания, чтобы избежать использования индексов или подобных обходных путей?

Большое спасибо!

Answer 1

Вы сделали это самовозглашающейся анонимной функцией.По сути, вызывается автоматически с помощью объекта jQuery.Вы также обернули функции в функции ... которые я не понимаю.Это должно работать:

(function($){
  $.fn.xyz = function( option ) {
    // override defaults with specified option
    option = $.extend( {}, $.fn.xyz.option, option );

  return this.each(function(index, element) {
            // run works fine.
            function run(index) {
                $(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) {
                    return function() {
                        run(i);
                }})(index));
            }

            //1 this version works great but I don't like the .parent().parent() especially as the animation requires 
            // just the ball I hover over gets the opacity assigned
            $("area").mouseover(
                function () {$(this).parent().parent().css('opacity', 0.5);}
            );

            //2 this version makes all balls transparent on page load
            $("area").mouseover(
                (function (activeElement) {
                    $(activeElement).css('opacity', 0.5);
                })
            );

            //3 this version makes all balls transparent on the first mouse over event 
            $("area").mouseover(
                (function (activeElement) {
                    return function() {
                        $(activeElement).css('opacity', 0.5);
                    }
                })
            );

            //4 also this version affecs all balls and not just the one that is mouse overed
            var activeBall = $(this);
            $("area").mouseover(function () {
                $(activeBall).css('opacity', 0.5);
            }).mouseout(function () {
                $(activeBall).css('opacity', 1);
            });

            run(index);
        });
    },

    $.fn.xyz.option = {};
})(jQuery);

По сути, SIAF делает такие вещи:

(function(txt) { alert(txt); })('Hello world!');

Вы объявляете анонимную функцию (у нее нет имени), котораяпринимает параметр, а затем с круглыми скобками в конце вы вызываете его, и в скобках указаны параметры функции.

Итак, когда вы сказали

        (function (activeElement) {
            return function() {
                $(activeElement).css('opacity', 0.5);
            }
        })(this)

Компилятор увиделmsgstr "активировать функцию с этим объектом в качестве параметра".Видя, как это будет ссылаться за пределы вашей объявленной функции на объект jQuery, jQuery рассматривает это как «изменение всех имеющихся у меня элементов с помощью функции .css».