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
    }

});

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

2 个答案: