在jQuery中通过bind传递变量似乎不起作用

Question

下面是我的代码：

function mouseOver()
{
    $(".beaver").fadeIn(100);

}

function mouseOut()
{
    $(".beaver").fadeOut(100);
}

$("#group_beaver").bind('mouseenter', mouseOver).bind('mouseleave', mouseOut);

但是为什么这个不起作用呢？

function mouseOver(variable)
{
    $(variable).fadeIn(100);

}

function mouseOut(variable)
{
    $(variable).fadeOut(100);
}

$("#group_beaver").bind('mouseenter', mouseOver('.beaver')).bind('mouseleave', mouseOut('.beaver'));

Answer 1

这是正确的；您正在调用mouseOver并期望它返回一个绑定到事件的函数。不过，要让它真正做到这一点，您可以使用以下代码：

function mouseOver(variable) {
    return function() {
        $(variable).fadeIn(100);
    };
}
function mouseOut(variable) {
    return function() {
        $(variable).fadeOut(100);
    };
}

Answer 2

icktoofay的技术称为闭包。关于闭包here的讨论非常全面。我发现它们对于使用window.setTimeout()安排事件非常有用。它们基本上允许你加载一个有前置条件的函数对象，然后不带参数地计算它。相当漂亮。

然而，尽管闭包很新颖，但通常可以避免这种情况。例如，如果.beaver是#group_beaver的子代，那么使用下面这样的代码会更好

function mouseOver()
{
    $(this).children().fadeIn(100);
}

在事件处理程序中，jQuery确保this总是引用触发事件的元素，所以基本上可以免费获得一个参数。考虑到示例的简单性，我猜闭包是不必要的。

您还可以执行以下操作：

$('group_beaver').mouseenter(function() {
    $(variable).fadeIn(100);
});

这实际上只是一种伪装的闭合。这和写东西一样：

function mouseOver(variable) {
    return function() {
        $(variable).fadeIn(100);
    }
};

$('#group_beaver').mouseenter(mouseOver('.beaver'));