jQuery 事件，获取 $(this) 的正确上下文

Question

我需要使用 $(this) 的正确上下文在 mouseenter 和 mouseleave 事件之外声明 $featuredImage 以避免代码重复。众所周知，mouseenter/mouseleave 之外的 $(this) 是一个空对象。我想将 $(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;
}

jQuery 事件，获取 $(this) 的正确上下文

jQuery events, getting correct context of $(this)

jquery

binding

bind

delegation

this