2012-04-02 6 views
-1

ich einige Javascript haben, die ich jQuery konvertieren wollen ...Konvertieren von JavaScript-Funktionen zu jQuery

Ich dachte, es wäre leicht, aber es scheint, ich war falsch!

Der Code sollte die Größe eines Textbereiches abhängig von der Menge des eingegebenen Textes ändern.

Hier ist mein Code:

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(); 
    }); 

}); 

Und hier ist der ursprüngliche Code:

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); 
    }); 

}); 

Hier ist ein jsfiddle, wenn es hilft ... http://jsfiddle.net/HhRUH/

+2

Und was genau hast du Probleme mit? –

+1

gibt es wirklich keinen Grund, den ursprünglichen Code zu jquery zu aktualisieren. Sie tun nichts mit den jQuery-Objekten, die mit den DOM-Objekten nicht möglich sind. Sie verkomplizieren den Code und verlieren die Leistung – jbabey

Antwort

1

Bitte beschreiben Sie Ihre Probleme speziell, wenn Sie eine Frage stellen.

Bis jetzt sehe ich, dass Sie den falschen Code für bindende Handler haben. Es sollte sein:

$(document).ready(function() { 

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

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

Der Grund, warum Sie $(this) in keyup(function() { ... }); verwenden können liegt daran, wie es von der jQuery-Implementierung aufgerufen wurde. Weitere Informationen zum Kontext (this) manuell finden Sie in den Artikeln .call und .apply.

in Ihrem Code verwenden Sie nicht haut.call(), aber haut(), die den this Kontext nicht festgelegt werden. Daher bedeutet this etwas anderes in Haut, wenn es aufgerufen wird wie $('*').keyup(haut) als wenn es aufgerufen wird wie $('*').keyup(function() { haut(); });. Das gleiche gilt für Ihren Anruf 10 von haut.

0

Sie verwenden this falsch aug senden. Übergeben Sie das Element stattdessen:

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)); 
    }); 
}); 
0

Sie verlieren Umfang. Sie können:

1) dmitrij Antwort (und ich denke, das beste)

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

2) oder wenn Sie ein paar mehr Dinge in den Rückruf tun möchten, können Sie es mit der Verwendung von Telefonierens():

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