jQuery newbie：如何将参数传递给事件处理函数？

问题描述：

我正在查看jQuery文档here中“click”事件的示例。我可以重构两个匿名函数如下，它仍然有效：jQuery newbie：如何将参数传递给事件处理函数？

$(document).ready(function(){ 
    $("p").hover(hilite, remove_hilite); 
    }); 

    function hilite() 
    { 
    $(this).addClass("hilite"); 
    } 

    function remove_hilite() 
    { 
    $(this).removeClass("hilite"); 
    }

但是，如果我想一个参数传递给hilite什么？我的第一个猜测是我应该使用一个匿名函数，如this。然而，这似乎并没有工作，即使我用它不带参数：

$("p").hover(
    function() 
    { 
     hilite(); 
    } 
    , 
    function() 
    { 
     remove_hilite(); 
    } 
);

我也试图重构如下，但这并没有工作，要么：

$(document).ready(function(){ 
    $("p").hover(hilite2, remove_hilite); 
    }); 

    function hilite2(){ 
    return hilite(); 
    }

什么正确的方法来做到这一点？我觉得我有一个很大的概念误解。特别是，我不清楚在第一次重构时如何将this对象传递给hilite函数。

答

您可以封装你悬停函数调用到接受了“类名”参数的另一个功能：

$.fn.hoverClass = function(className){ 
    return this.hover(function(){ 
     $(this).addClass(className); 
    }, function(){ 
     $(this).removeClass(className); 
    }); 
}

然后，你可以通过这个简单的使用它：

$('p').hoverClass('hilite');

答

为什么不能简单地在匿名函数中调用$(this).addClass()方法？

$("p").hover(
    function() { 
    $(this).addClass("hilight"); 
    }, 
    function() { 
    $(this).removeClass("hilight"); 
    } 
);

是的，这是我链接到页面上的原有功能。我正在尝试探索如何重构它。在这种情况下，它只是一个单线程，但我预计有复杂的功能，我想存储在一个单独的文件，以便我可以在多个网页中重复使用。这是不可能的吗？ – RexE 2009-06-21 02:25:07

答

我想你想要的是部分功能应用。

function partial(func /*, 0..n args */) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    return function() { 
    var allArguments = args.concat(Array.prototype.slice.call(arguments)); 
    return func.apply(this, allArguments); 
    }; 
}

通过以上功能，现在可以做到以下几点：

$(document).ready(function(){ 
    var f = partial(hilite, "arg1", "arg2" /*etc...*/); 
    $("p").hover(f, remove_hilite); 
    });

参考：How can I pre-set arguments in JavaScript function call? (Partial Function Application)

jQuery newbie：如何将参数传递给事件处理函数？

相关推荐