Question

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

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

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

修改：

更清楚的是，如果我想将逻辑应用于事件地图中的每个事件，请说：

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

不确定为什么你需要它，因为这个变量将引用两个函数上的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事件映射中共享变量？

2 个答案: