I'm looking at the example for the "click" event in the jQuery documentation here. I can refactor the two anonymous functions as follows and it still works:
我在这里查看jQuery文档中“click”事件的示例。我可以按如下方式重构两个匿名函数,它仍然有效:
$(document).ready(function(){
$("p").hover(hilite, remove_hilite);
});
function hilite()
{
$(this).addClass("hilite");
}
function remove_hilite()
{
$(this).removeClass("hilite");
}
However, what if I want to pass an argument to hilite
? My first guess was that I should use an anonymous function like this. However, this does not seem to work, even when I'm using it without arguments:
但是,如果我想将一个参数传递给hilite怎么办?我的第一个猜测是我应该使用这样的匿名函数。但是,即使我在没有参数的情况下使用它,这似乎也不起作用:
$("p").hover(
function()
{
hilite();
}
,
function()
{
remove_hilite();
}
);
I also tried refactoring as follows, but this did not work either:
我也尝试重构如下,但这也不起作用:
$(document).ready(function(){
$("p").hover(hilite2, remove_hilite);
});
function hilite2(){
return hilite();
}
What is the proper way to do this? I feel like I have a big conceptual misunderstanding. In particular, I am unclear about how in my first refactoring, the this
object is passed to the hilite
function.
这样做的正确方法是什么?我觉得我有一个很大的概念误解。特别是,我不清楚在我的第一次重构中,这个对象是如何传递给hilite函数的。
3 个解决方案
#1
You can encapsulate your hover function call into another function that accepts the 'className' parameter:
您可以将悬停函数调用封装到另一个接受'className'参数的函数中:
$.fn.hoverClass = function(className){
return this.hover(function(){
$(this).addClass(className);
}, function(){
$(this).removeClass(className);
});
}
Then you can use it simply by this:
然后你可以简单地使用它:
$('p').hoverClass('hilite');
#2
I think that what you want is a partial function application.
我认为你想要的是一个部分功能应用程序。
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);
};
}
With the above function, you can now do the following:
使用上述功能,您现在可以执行以下操作:
$(document).ready(function(){
var f = partial(hilite, "arg1", "arg2" /*etc...*/);
$("p").hover(f, remove_hilite);
});
Reference: How can I pre-set arguments in JavaScript function call? (Partial Function Application)
参考:如何在JavaScript函数调用中预先设置参数? (部分功能应用)
#3
Why can't you simply call the $(this).addClass()
method within the anonymous functions?
为什么不能简单地在匿名函数中调用$(this).addClass()方法?
$("p").hover(
function () {
$(this).addClass("hilight");
},
function () {
$(this).removeClass("hilight");
}
);
#1
You can encapsulate your hover function call into another function that accepts the 'className' parameter:
您可以将悬停函数调用封装到另一个接受'className'参数的函数中:
$.fn.hoverClass = function(className){
return this.hover(function(){
$(this).addClass(className);
}, function(){
$(this).removeClass(className);
});
}
Then you can use it simply by this:
然后你可以简单地使用它:
$('p').hoverClass('hilite');
#2
I think that what you want is a partial function application.
我认为你想要的是一个部分功能应用程序。
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);
};
}
With the above function, you can now do the following:
使用上述功能,您现在可以执行以下操作:
$(document).ready(function(){
var f = partial(hilite, "arg1", "arg2" /*etc...*/);
$("p").hover(f, remove_hilite);
});
Reference: How can I pre-set arguments in JavaScript function call? (Partial Function Application)
参考:如何在JavaScript函数调用中预先设置参数? (部分功能应用)
#3
Why can't you simply call the $(this).addClass()
method within the anonymous functions?
为什么不能简单地在匿名函数中调用$(this).addClass()方法?
$("p").hover(
function () {
$(this).addClass("hilight");
},
function () {
$(this).removeClass("hilight");
}
);