javascript - 在 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
            }
        });

请注意，这是比将变量移动到更高范围并尝试共享它们更好的方法，因为在这里，它们针对每个事件发生进行了正确的初始化，并且如果您的事件处理程序正在服务多个对象或如果事件以不寻常的顺序到达。