Преобразование JavaScript функции JQuery

Question

У меня есть некоторые JavaScript, который я хочу, чтобы преобразовать в JQuery ...

Я думал, что это будет легко, но, казалось бы, я был неправ!

Код должен изменить размер текстового поля в зависимости от количества введенного в него текста.

Вот мой код:

function haut() { 
    if ($(this).scrollTop() > 0) aug(); 
} 
function aug() { 
    var h = parseInt($(this).height()); 
    $(this).height(h + 10); 
    haut(); 
} 
function top() { 
    $(this).scrollTop(100000); 
    haut(); 
} 

$(document).ready(function() { 

    $("#txt_test").keyup(function() { 
     haut(); 
    }); 

    $("#txt_test").focus(function() { 
     top(); 
    }); 

}); 

А вот исходный код:

function haut(idt) { 
    if (document.getElementById(idt).scrollTop > 0) aug(idt); 
} 
function aug(idt) { 
    var h = parseInt(document.getElementById(idt).style.height); 
    document.getElementById(idt).style.height = h + 10 +"px"; 
    haut(idt); 
} 
function top(idt) { 
    document.getElementById(idt).scrollTop = 100000; 
    haut(idt); 
} 

$(document).ready(function() { 

    $("#txt_test").keyup(function() { 
     haut(this.id); 
    }); 

    $("#txt_test").focus(function() { 
     top(this.id); 
    }); 

}); 

Вот jsfiddle, если это помогает ... http://jsfiddle.net/HhRUH/

Answer 1

Опишите свои проблемы конкретно, когда задаете вопрос.

До сих пор я вижу, что у вас неправильный код для привязки обработчиков. Оно должно быть:

$(document).ready(function() { 

    $("#txt_test").keyup(haut); 

    $("#txt_test").focus(top); 
}); 

Answer 2

Причина вы можете использовать $(this) в keyup(function() { ... }); из-за того, как он был вызван реализацией jQuery. См. Javascript's .call и .apply для получения дополнительной информации об установке контекста (this) вручную.

В вашем коде вы не используете haut.call(), но haut(), который не будет устанавливать контекст this. Следовательно, this означает что-то другое в haut, когда оно вызывается как $('*').keyup(haut), чем при его вызове, например $('*').keyup(function() { haut(); });. То же самое касается вашего звонка aug() от haut.

Answer 3

просто отправить параметр в aug

function haut(idt) { 
    if ($(this).scrollTop() > 0) aug(idt); 
} 

http://jsfiddle.net/HhRUH/1/

Answer 4

Вы используете this неправильно. Пропустите элемент вместо:

function haut(element) { 
    if (element.scrollTop() > 0) aug(element); 
} 
function aug(element) { 
    var h = parseInt(element.height()); 
    element.height(h + 10); 
    haut(element); 
} 
function top(element) { 
    element.scrollTop(100000); 
    haut(element); 
} 

$(document).ready(function() { 
    $("#txt_test").keyup(function() { 
     haut($(this)); 
    }); 

    $("#txt_test").focus(function() { 
     top($(this)); 
    }); 
}); 

Answer 5

Вы теряете область действия. Вы можете использовать:

1) ответ Димитрия (и я думаю, что самый лучший)

$("#txt_test").keyup(haut); 
$("#txt_test").focus(top); 

2), или если вы хотите, чтобы сделать еще несколько вещей в обратный вызов, вы можете сделать это с помощью вызова():

$("#txt_test").keyup(function() 
{ 
    haut.call(this); 
    alert('...'); 
}); 
$("#txt_test").focus(function() 
{ 
    top.call(this); 
});