在jQuery中的链式事件处理程序之间传递局部变量

我正在构建一个简单的jQuery脚本，它将在我的网站上替换<img>元素的源图像。我想知道是否可以将一个事件处理程序（对于mouseenter）的局部变量传递给mouseleave事件的下一个链接处理程序。这是我的代码：在jQuery中的链式事件处理程序之间传递局部变量

  $("#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事件处理程序，以节省自己不得不在此处理程序写一遍相同的代码。如果是的话，有可能如何？

来源

2015-07-19 luqo33

你为什么不在全球范围内定义它们？或者，您也可以为'mouseenter mouseleave'指定一个回调 – halfzebra

首先，局部变量对于它们在其中定义的函数是局部的，因此一个事件的事件处理函数内的变量不可用于在该函数外定义的另一个事件处理函数。

您可以通过将两个事件处理函数组合成一个事件处理函数来保存自己复制代码的地方，在该函数中使用通用设置，然后根据事件进行分支。

下面是一个代码示例：

 // 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 
      } 
     });

注意，这是不是移动变量到一个更高的范围和试图分享他们，因为在这里，他们是正确初始化为每个事件一个更好的方法如果您的事件处理程序正在处理多个对象，或者事件以异常顺序到达，甚至可能会高效地工作。

来源

2015-07-19 19:53:37 jfriend00

除了@ 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 
    } 

});

来源

2015-07-19 20:07:36 charlietfl

在jQuery中的链式事件处理程序之间传递局部变量

回答

相关问题