如何在 jQuery 事件映射中共享变量？

Question

给定以下 jQuery .on() 事件映射：

$('header').on({
  mouseenter: function(e) {},
  mouseleave: function(e) {},
}, 'li');

如何在 mouseenter 和 mouseleave 事件之间共享一个 var $this = $(this) 变量以使其保持干燥？

编辑:

为了更清楚，如果我想将逻辑应用于事件映射中的每个事件，假设：

mouseenter: function(e) {
  // Grabs the list element.
  var $this = $(this);

  // Gets the sub-menu of the active menu item, if there is one.
  var $subMenu = $this.find('.main-menu__sub-menu').first();

  if ($subMenu.length) {
    // Do something...
  }
},
mouseleave: function(e) {
  // Perform the same checks, and get the same variables as above...
},
click: function(e) {
  // Again, perform the same checks and grab the same variables as above...
}

我显然不想重复我的逻辑，但我需要获取触发事件的 li 元素，这对于事件映射中的所有事件都是相同的...希望这使得更有意义？

Answer 1

不确定为什么需要它，因为 this 变量将引用两个函数中的 header 元素。但是你可以做到的一种方法是在范围之外声明变量

var $this;

 $('header').on({
  mouseenter: function (e) {
        $this = $(this);
      },
  mouseleave: function (e) {
    $this; // is available
  },
}, 'li');

Answer 2

根据你的扩展描述，你可以做这样的事情：

function getSubmenu(li) {
    // Grabs the list element.
    var $li = $(li);

    // Gets the sub-menu of the active menu item, if there is one.
    var $subMenu = $li.find('.main-menu__sub-menu').first();
    return $subMenu;
}

$('header').on({
    mouseleave: function(e) {
        var $subMenu = getSubmenu(this)
        // do some stuff...
    },
    click: function(e) {
        var $subMenu = getSubmenu(this)
        // do some other stuff...
    }
 }, 'li');

如何在 jQuery 事件映射中共享变量？

How can I share a variable amongst a jQuery event map?

javascript

variables

jquery

events

dry