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!');

您声明了一个匿名函数（它没有name)，它接受一个参数，然后在末尾加上括号，您可以调用它，括号中的内容是函数的参数。

因此，当您说

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

编译器看到“使用 this 对象作为参数激活函数”时。鉴于 this 将如何在您声明的函数之外引用 jQuery 对象，jQuery 将其视为“使用 .css 函数更改我拥有的所有元素”。