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 без необходимости повторного объявления var length = $(this).val().length; в .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).Таким образом, вы можете напрямую ввести это значение в заголовок if.

$ (this) против this

Чтобы понять, когда использовать какой, вам нужнопонять разницу между объектом-элементом DOM и объектом jQuery.Объект jQuery - это объект-оболочка, который содержит ноль или более объектов элемента DOM (например, массив).Важно понимать, что методы jQuery (например, .addClass()) можно вызывать только для объектов jQuery, но не для элементов DOM напрямую.

Внутри функций обработчика событий значение this относится к элементу DOM, в которомсобытие произошлоТеперь, если вы хотите вызвать методы jQuery для этого элемента DOM, вам нужно обернуть этот элемент 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
    }
});