Question

我一直想知道在事件中使用jQuery的this时的特定情况。

让我们说我们有以下功能：

function myPrint(randomString){
  console.log(randomString);
}

我们希望使用jQuery将它绑定到输入的更改事件，每次更改时都会打印输入的内容。

可以这样做：

$('input').change(function(){
  myPrint(this.value);
})

假设我们现在想以相同的方式将myPrint绑定到其他几个输入。第一个版本看起来像这样：

$('input1').change(function(){
  myPrint(this.value);
})
$('input2').change(function(){
  myPrint(this.value);
})
.
.
.
$('inputN').change(function(){
  myPrint(this.value);
})

但这会违反DRY，因为我们一遍又一遍地重复相同的匿名功能。解决此问题的一种简单方法是声明本地handler函数：

function handler(){
  myPrint(this.value);
}
$('input1').change(handler);
$('input2').change(handler);
.
.
.
$('inputN').change(handler);

但这需要handler功能。

所以，我的问题是：有没有办法消除使用所有匿名函数而不声明handler等其他函数的需要？

我试图像这样使用bind：

$（'input1'）。change（myPrint.bind（null，this.value））;

但是它不起作用，因为this不在事件的范围内，因此不是指输入。

编辑：这个问题并不是关于jQuery的选项，而是关于从this到参数到另一个函数的转换，而不需要声明一个辅助函数。

Answer 1

不。

你必须为每个回调都有一个函数，如果你想将参数传递给回调中的函数，它需要一个包装器回调。

但是，在这种特殊情况下，您可以这样做：

$('input1, input2, input3, inputN').change(function() {
    myPrint(this.value);
});

传递给$()的参数就像CSS选择器一样，因此，就像CSS选择器一样，您可以用逗号分隔多个选择器将它们组合在一起。

如果要对多个事件使用相同的函数，可以使用bind并传递以空格分隔的事件名称：

$('input1').bind('change click', function() {
    myPrint(this.value);
});

Answer 2

你可以像这样使用jquery：

$("input").each( function() { this.change( function () { alert("a"); } ) } );

Answer 3

您可以在1个选择器中选择多个输入，然后调用您的函数：

$('input1, input2, input3').change(function(){
    myPrint(this.value);
})

Answer 4

从this转换为参数到另一个函数，而无需声明辅助函数。

好吧，由于bind没有这样做而且没有其他本机函数，我们需要一个自定义帮助函数。但是，我们可以使用函数式编程来创建它，而不是使用函数表达式。

请注意，您仍然应该只创建一个绑定到所有元素的handler，而不是为每个元素创建新的处理程序。无论您是通过使用变量来存储它，还是在所有元素的集合上调用.change()，都无关紧要。

Function.prototype.methodize = function() {
    // http://api.prototypejs.org/language/Function/prototype/methodize/
    var f = this;
    return function() {
        return f.call(null, this);
    };
};
Function.prototype.map = function(g) {
    // function composition
    var f = this;
    return function() {
        return g(f.apply(this, arguments));
    };
};
Object.get = function(p) {
    return function(v) { return v[p]; };
};

现在你可以使用

var handler = Object.get("value").map(myPrint).methodize();

将jquery事件转换为函数参数

4 个答案: