jquery - 如何创建在 jQuery 'on' 对象中的方法之间共享的变量？

Question

我试图在悬停和用户离开(可能在窗口内单击)悬停元素时都有一些逻辑:

jQuery('.element').on({
    mouseenter: function() {
    },
    mouseleave: function() {

    }
});

问题是，对于每种方法，mouseenter 和 mouseleave，我必须重新初始化我感兴趣的公共(public)变量，例如 jQuery(this) 来引用我正在使用的当前元素。

我知道它们都是不同的事件，但是可以使用操作的共同点在哪里，这样我就不必复制逻辑/重新初始化变量？

我想做类似的事情(我知道这不是正确的语法，但我需要某种构造函数):

jQuery('.element').on(
    let shared_variable = jQuery(this), {
    mouseenter: function() {
    },
    mouseleave: function() {

    }
});

Answer 1

一种选择是只有一个处理程序，绑定(bind)到多个事件，然后在处理程序中定义公共(public)变量，检查哪个事件触发了它，并调用适当的其他函数:

const handlers = {
  mouseenter($this, shared) {
    $this.css('background-color', shared);
  },
  mouseleave($this, shared) {
    $this.css('background-color', '');
  }
}
jQuery('.element').on('mouseenter mouseleave', function(e) {
  const $this = jQuery(this);
  const shared = 'yellow';
  handlers[e.type]($this, shared);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">hover</div>

您还可以在处理程序内定义对象，以避免传递变量，但尽管需要较少的代码，但它有点不优雅:

jQuery('.element').on('mouseenter mouseleave', function(e) {
  const handlers = {
    mouseenter() {
      $this.css('background-color', shared);
    },
    mouseleave() {
      $this.css('background-color', '');
    }
  };
  const $this = jQuery(this);
  const shared = 'yellow';
  handlers[e.type]();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">hover</div>

如果您有许多此类公共(public)变量，您可以考虑使用包含这些公共(public)变量的对象:

const handlers = {
  mouseenter({ $this, shared1 }) {
    $this.css('background-color', shared1);
  },
  mouseleave({ $this, shared2 }) {
    $this.css('background-color', shared2);
  }
}
jQuery('.element').on('mouseenter mouseleave', function(e) {
  const shared = 'yellow';
  const sharedParams = {
    $this: jQuery(this),
    shared1: 'yellow',
    shared2: 'orange'
  };
  handlers[e.type](sharedParams);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">hover</div>