jQuery事件，獲取$（this）的正確上下文

Question

我需要在mouseenter和mouseleave事件之外聲明$featuredImage以避免代碼複製的正確上下文$(this)。大家都知道$(this)以外的mouseenter/mouseleave是一個空的對象。我想將$(this)綁定到正確的上下文中，只需指定$featuredImage一次，然後從兩個函數中訪問它，但我似乎找不到這樣做的好方法。

function postThumbOverlay() { 

    var $featuredImage; 

    $(document).on({ 
     mouseenter: function(e) { 
      // duplicated 
      $featuredImage = $(this).parents('.grid').children('.entry__featured-image'); 
      $featuredImage.find('.entry__featured-image--overlay').addClass('show--overlay'); 
      e.stopPropagation(); 
     }, 
     mouseleave: function() { 
      // duplicated 
      $featuredImage = $(this).parents('.grid').children('.entry__featured-image'); 
      $featuredImage.find('.entry__featured-image--overlay').removeClass('show--overlay'); 
     } 
    }, '.entry-link'); 
} 

我不使用.on('hover')的原因是因爲這樣做停止的AJAX調用後工作，我需要使用mouseenter和mouseleave分開。

Answer 1

它解壓到一個方法 -

function getFeaturedImageElement($this){ 
return $this.parents('.grid').children('.entry__featured-image'); 
} 

，並調用它的事件 - var $featuredImage = getFeaturedImageElement($(this));

如果你真的想避免查詢每個事件的DOM，然後有一個方法內檢查（保持$featuredImage全球爲你做） -

var $featuredImage; 
function getFeaturedImageElement($this){ 
    if(!$featuredImage){ 
    $featuredImage = $this.parents('.grid').children('.entry__featured-image'); 
    } 
    return $featuredImage; 
}