Transtale jquery event's this to a function parameter

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。绑定(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

你可以在一个选择器中选择多个输入，然后调用function:

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