0

jQuery 的悬停文档只显示了一种使用该功能的方法：

$('.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);

按预期工作（触发事件），但不允许我将任何内容传递给命名函数。有什么方法可以让我将变量传递给函数吗？

4

5 回答 5

5

是的，您需要为此使用匿名函数：

$('myClass').hover(function( e ) {
    onMouseOver( param1, param2... );
}, function( e ) {
    onMouseOut( param1, param2... );
});
于 2013-06-07T19:30:30.723 回答
1

hover糖方法并不真正适用于复杂的场景。

在您的情况下，使用它可能会更好.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 的方式来做到这一点。

于 2013-06-07T20:01:01.087 回答
1

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

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

这是从该事件将参数、参数传递给命名函数的唯一方法。

于 2013-06-07T19:31:39.837 回答
0

这是函数引用与函数调用的问题。添加“()”会调用函数（在这种情况下，您将在绑定时执行此操作...有效地绑定函数的结果而不是函数本身。

要传递参数，最简单的选择是将命名函数包装在匿名函数中（正如@antyrat 刚刚发布的那样）。

而且不，这不是悬停的怪癖，这是标准的 JavaScript（以及大多数其他具有一流功能的语言）。

于 2013-06-07T19:31:30.210 回答
0

正如其他几个人所指出的，您必须使用柯里化或绑定来将值传递给函数。在您编写此代码的示例中：

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

您实际上是在该行立即调用 onMouseOver() 和 onMouseOut() 方法，而不是在鼠标实际移出或移出元素时；你写的相当于写这个：

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

这绝对不是你想要的。

jQuery 只能理解形式为 的函数function(event)，因此如果您想要更多参数或其他参数，则必须使用柯里化来获取它们。柯里化（以设计该概念的数学教授的名字命名）可以被认为是创建一个新函数，其中您要传递的值在其中“预先绑定”。

因此，假设您有一个foo想要传递给onMouseOver处理程序的变量，如下所示：

功能 onMouseOver(foo) {
    ...
}

...

var foo = "你好，世界";

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

为了能够传递该值，您需要另一个将其包装起来的函数，foo以及onMouseOver带有 jQ​​uery 可以使用的函数签名的函数。你这样做：

功能 onMouseOver(foo) {
    ...
}

...

var foo = "你好，世界";

var curriedOnMouseOver = 函数（事件）{
    onMouseOver(foo);
};

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

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

功能 onMouseOver(foo) {
    ...
}

...

var foo = "你好，世界";

$('myClass').hover(函数(事件) {
    onMouseOver(foo);
});

上面的这个例子还展示了如何将事件传递给你的函数，只需向它添加更多参数：

函数 onMouseOver(事件, foo, bar) {
    ...
}

...

var foo = "你好，世界";
var bar = "再见，世界";

$('myClass').hover(函数(事件) {
    onMouseOver(event, foo, bar);
});

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

于 2013-06-07T19:44:30.287 回答