jQuery關閉和事件函數（mouseover，mouseout，...）

Question

我試圖讓我的頭瞭解如何使用與jQuery事件函數有關的閉包。

我目前的問題是圓形在屏幕上的形狀，使他們停下來，在鼠標懸停和淡入淡出，並重新開始鼠標。我必須使用imagemaps來創建一個圓形的鼠標懸停敏感區域。雖然動畫工作正常，但我很難在鼠標懸停功能上使用閉包，因爲我希望它是。

鑑於此設置：

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

編譯器鋸「激活與此對象作爲參數的函數」。看到這將如何將您的聲明函數外部引用到jQuery對象，jQuery將其視爲「使用.css函數更改所有元素」。