在jQuery中的鏈式事件處理程序之間傳遞局部變量

Question

我正在構建一個簡單的jQuery腳本，它將在我的網站上替換<img>元素的源圖像。我想知道是否可以將一個事件處理程序（對於mouseenter）的局部變量傳遞給mouseleave事件的下一個鏈接處理程序。這是我的代碼：

  $("#homepage-media-slider li > img").on('mouseenter', function() { 
       var ele = $(this); 
       var eleSrc = $(this).attr('src'); 
       var overleafImage = $(this).attr('data-overleaf'); 
       ele.attr('src', overleafImage); 
       ele.attr('data-overleaf', eleSrc); 
      }).on('mouseleave', function() { 
       .... 
      }); 

我希望能夠使用ele，eleSrc和overleafImage在事件處理程序mouseleave事件處理程序，以節省自己不得不在此處理程序寫一遍相同的代碼。如果是的話，有可能如何？

Answer 1

首先，局部變量對於它們在其中定義的函數是局部的，因此一個事件的事件處理函數內的變量不可用於在該函數外定義的另一個事件處理函數。

您可以通過將兩個事件處理函數組合成一個事件處理函數來保存自己複製代碼的地方，在該函數中使用通用設置，然後根據事件進行分支。

下面是一個代碼示例：

 // set up a single event handler for multiple events 
     $("#homepage-media-slider li > img").on('mouseenter mouseleave', function(e) { 
      // common code setup here 
      var ele = $(this); 
      var eleSrc = $(this).attr('src'); 

      // branch based on the event that occurred here 
      if (e.type === "mouseenter") { 
       // mouseenter code here 
       var overleafImage = $(this).attr('data-overleaf'); 
       ele.attr('src', overleafImage); 
       ele.attr('data-overleaf', eleSrc); 
      } else { 
       // mouse leave code here 
      } 
     }); 

注意，這是不是移動變量到一個更高的範圍和試圖分享他們，因爲在這裏，他們是正確初始化爲每個事件一個更好的方法如果您的事件處理程序正在處理多個對象，或者事件以異常順序到達，甚至可能會高效地工作。

Answer 2

除了@ jfriend00答案的線路可以利用hover()觸發的事件和2個處理器組合成一個

$("#homepage-media-slider li > img").hover(function (e) { 
    // which way are we going ? 
    var isEnter = e.type === "mouseenter", 
     ele = $(this), 
     eleSrc = $(this).attr('src'), 
     overleafImage = $(this).attr('data-overleaf'); 
    if (isEnter) { 
     //mouseenter code 
     ele.attr('src', overleafImage); 
     ele.attr('data-overleaf', eleSrc); 
    } else { 
     // mouseleave code here 
    } 

});