jquery 如何将额外的参数传递给$.fn.hover()中的处理程序?

n6lpvg4x  于 2022-11-03  发布在  jQuery
关注(0)|答案(5)|浏览(199)

jQuery's hover的文档仅显示了使用函数的一种方法:

$('.myClass').hover(function () {
    console.log('on mouse over');
},
function () {
    console.log('on mouse out');
});

但是,当您将这些函数更改为命名函数时,它将无法正常工作,在页面加载时(或在您将其粘贴到控制台时)触发命名函数:

function onMouseOver() {
    console.log('on mouse over');
}

function onMouseOut()
    console.log('on mouse out');
}

$('.myClass').hover(onMouseOver(), onMouseOut());

将最后一行更改为:

$('myClass').hover(onMouseOver, onMouseOut);

按预期工作(在事件上触发),但不允许我向命名函数传递任何内容。是否有任何方法允许我向函数传递变量?

zbdgwd5y

zbdgwd5y1#

是的,您需要使用匿名函数:

$('myClass').hover(function( e ) {
    onMouseOver( param1, param2... );
}, function( e ) {
    onMouseOut( param1, param2... );
});
myss37ts

myss37ts2#

您可以通过如下调用将变量传递给命名函数:

$('.myClass').hover(function() {
    onMouseOver(arg);
}, function() {
    onMouseOut(arg);
});

这是从事件中传递参数到命名函数的唯一方法。

c6ubokkw

c6ubokkw3#

hover sugar方法实际上并不适用于复杂的场景。
在您的情况下,使用.on('mouseenter')on('mouseleave')可能会更好,这样您就可以将额外的event数据传递给每个方法,例如

$('.myClass').on('mouseenter', {param1: val1}, onMouseOver).on('mouseleave', {param2: val2}, onMouseOut);

然后,在处理程序中,您可以访问这些参数,如下所示:

function onMouseOver(e) {
    console.log(e.data.param1);
}

function onMouseOut(e) {
    console.log(e.data.param2);
}

这是一种 *jQuery的方式 *。

ymdaylpp

ymdaylpp4#

这是函数引用与函数调用的问题。添加“()”调用函数(在本例中,您将在绑定时执行此操作......有效地绑定了函数的结果,而不是函数本身。
要传递参数,最简单的选择是将命名函数 Package 在匿名函数中(如刚才发布的@antyrat)。
也不,这不是悬停的怪癖,这是标准的JavaScript(和大多数其他具有一流功能的语言)。

bhmjp9jg

bhmjp9jg5#

正如其他几个人所指出的,你必须使用 curryingbinding 将值传递给函数。在你写的例子中:

$('.myClass').hover(onMouseOver(), onMouseOut());

您实际上是在该行上立即调用onMouseOver()和onMouseOut()方法,并且当鼠标实际移到元素上方或移出元素时调用not;你所写的就相当于这样写:

var mouseOverResult = onMouseOver();
var mouseOutResult = onMouseOut();
$('.myClass').hover(mouseOverResult, mouseOutResult);

这绝对不是你想要的。
jQuery只能理解function(event)形式的函数,所以如果你想要更多的参数,或者其他参数,你必须使用currying来获取它们。Currying(以提出这个概念的数学教授命名)可以被认为是创建一个新函数,你想要传递的值在函数内部是“预先绑定”的。
假设你有一个变量foo,你想把它传递给你的onMouseOver处理程序,如下所示:

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

$('myClass').hover(...);

为了能够传递该值,需要另一个函数,该函数使用jQuery可以使用的函数签名来 Package fooonMouseOver

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

var curriedOnMouseOver = function(event) {
    onMouseOver(foo);
};

$('myClass').hover(curriedOnMouseOver);

正如其他几个人所建议的那样,可以通过在hover()调用中创建curried闭包来避免额外的变量声明:

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

$('myClass').hover(function(event) {
    onMouseOver(foo);
});

上面的这个例子也展示了如何通过简单地向函数添加更多的参数来将事件传递给函数:

function onMouseOver(event, foo, bar) {
    ...
}

...

var foo = "Hello, World";
var bar = "Goodbye, World";

$('myClass').hover(function(event) {
    onMouseOver(event, foo, bar);
});

JavaScript的函数---或闭包---是非常强大的工具,值得您花时间学习使用它们可以做的一些事情,比如这些例子。

相关问题