Jquery：将变量传递给下一个链接函数，这是正确的方法吗？

Question

我想知道这是否正确。

$('.myfilter').focus(function(){
    var length = $(this).val().length; 
    if (length == 0) {
        dosomething
    }
}).blur(function(length){
    if (length == 0) {
        dowhatever
            }
})

上面我简化了我的代码，我只是检查焦点上的length == 0和输入的模糊。 注意我如何声明焦点的length ，但不是模糊，但是我在.blur(function(length){添加了变量名称.blur(function(length){ 。这是在.blur获取length的更好方法，而不必重新声明var length = $(this).val().length; in .blur？

与此相反：

$('.myfilter').focus(function(){
    var length = $(this).val().length; 
    if (length == 0) {
        dosomething
    }
})

$('.myfilter').blur(function(length){
    var length = $(this).val().length;
    if (length == 0) {
        dowhatever
            }
})

第一个代码块是更好的方法吗？

Answer 1

怎么没有声明任何变量... :)

$('.myfilter').focus(function() {
    if ( this.value.length === 0 ) {
        dosomething();
    }
}).blur(function(length) {
    if ( this.value.length === 0 ) {
        dowhatever();
    }
});

这个：

$('.myfilter').bind('focus blur', function(e) {
    if ( this.value.length === 0 ) {
        e.type === 'focus' ? dosomething() : dowhatever();
    }
});

---

使用变量

通常，如果需要多次使用某个值，则需要使用变量。 但是，在这种情况下，只需要一次this.value.length值（在if-header中）。 因此，您可以直接在if-header中注入此值。

$（this）vs this

为了理解何时使用哪个，您需要了解DOM元素对象和jQuery对象之间的区别。 jQuery对象是一个包装器对象，它包含零个或多个DOM元素对象（如数组）。 重要的是要了解您只能在jQuery对象上调用jQuery方法（如.addClass() ），而不能直接调用DOM元素。

在事件处理函数内部， this值引用事件触发的DOM元素。 现在，如果要在该DOM元素上调用jQuery方法，则需要将该DOM元素包装在jQuery对象中 - 您可以通过编写$(this) 。

$(this).addClass('selected'); // works fine
this.addClass('selected'); // throws Error

Answer 2

我通常会做的，如果你不想再放length ，是店length在属性this ，然后在读它blur的事件，就像这样：

$('.myfilter').focus(function(){
    this.val_length = $(this).val().length; 
    if (this.val_length == 0) {
        dosomething
    }
}).blur(function(){
    if (this.val_length == 0) {
        dowhatever
    }
})

Answer 3

第一个代码块不起作用 - 传递给.blur()参数实际上是触发模糊调用的事件。

另外请注意，有没有必要使用jQuery获得的价值，它的直接属性this （用于输入元素）：

$('.myfilter').blur(function(ev) {
    if (this.value.length === 0) {
        // dowhatever
    }
});