在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，以避免我不得不在这个处理程序中再次编写相同的代码。有可能吗?如果有，怎么做？

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
    }

});