javascript - 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){ 中添加了变量名。这是获得更好的方法吗length 可在 .blur 中访问，而无需在 .blur 中重新声明 var length = $(this).val().length;？

与此相反:

$('.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 中)。因此，您可以直接将此值注入(inject)到 if-header 中。

$(this) 对比

为了了解何时使用 which，您需要了解 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