Передача локальных переменных между цепными обработчиками событий в jQuery

Question

Я создаю простой сценарий jQuery, который будет чередовать исходное изображение элемента <img> на моем веб-сайте. Мне было интересно, можно ли передавать локальные переменные из одного обработчика события (для mouseenter) в следующий, связанный обработчик для события mouseleave. Это мой код:

  $("#homepage-media-slider li > img").on('mouseenter', function() { 
       var ele = $(this); 
       var eleSrc = $(this).attr('src'); 
       var overleafImage = $(this).attr('data-overleaf'); 
       ele.attr('src', overleafImage); 
       ele.attr('data-overleaf', eleSrc); 
      }).on('mouseleave', function() { 
       .... 
      }); 

Я хочу, чтобы иметь возможность использовать ele, eleSrc и overleafImage в обработчик события для обработчика событий mouseleave для того, чтобы сохранить себя, чтобы писать один и тот же код еще раз в этом обработчике. Возможно ли, если да, то как?

Answer 1

Прежде всего локальные переменные являются локальными для функции, в которой они определены, поэтому переменные внутри функции обработчика событий для одного события недоступны для другой функции обработчика событий, которая определена вне этой функции.

Вы можете сохранить дубликат кода, объединив два обработчика событий в одну функцию обработки событий, в которой вы используете общую настройку, а затем ветвь на основе события.

Вот пример кода, что:

 // set up a single event handler for multiple events 
     $("#homepage-media-slider li > img").on('mouseenter mouseleave', function(e) { 
      // common code setup here 
      var ele = $(this); 
      var eleSrc = $(this).attr('src'); 

      // branch based on the event that occurred here 
      if (e.type === "mouseenter") { 
       // mouseenter code here 
       var overleafImage = $(this).attr('data-overleaf'); 
       ele.attr('src', overleafImage); 
       ele.attr('data-overleaf', eleSrc); 
      } else { 
       // mouse leave code here 
      } 
     }); 

Заметим, что это гораздо лучше, чем перемещение переменных на более высокий объем и пытается разделить их, потому что здесь, они правильно инициализирован для каждого события и даже будет работать, если ваш обработчик событий обслуживал несколько объектов или события были в необычном порядке.

Answer 2

Вдоль линии @ jfriend00 ответ может использовать hover(), который вызывает для обоих событий и объединить 2 обработчиков в один

$("#homepage-media-slider li > img").hover(function (e) { 
    // which way are we going ? 
    var isEnter = e.type === "mouseenter", 
     ele = $(this), 
     eleSrc = $(this).attr('src'), 
     overleafImage = $(this).attr('data-overleaf'); 
    if (isEnter) { 
     //mouseenter code 
     ele.attr('src', overleafImage); 
     ele.attr('data-overleaf', eleSrc); 
    } else { 
     // mouseleave code here 
    } 

});