Wie kondensiere ich mehrere jQuery-Funktionen in einem?

Question

Ich bin noch ziemlich neu bei jQuery und versuche, Möglichkeiten zu finden, um meinen Code zu optimieren. Ich arbeite gerade an einer Anwendung, in der ich jedes Mal, wenn jemand ein Feld verlässt (.blur), einige Berechnungsmethoden anrufe. Ich möchte diese Methoden nur aufrufen, wenn bestimmte Kriterien erfüllt sind (zB Wert! = 0). Ich habe 9 Felder, in denen ich gerade kalkuliere und überprüfe.

$(document).ready(function() { 
var currentValue = {}; 

$("#txtValue1").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $("#txtValue1").valid(); 
    if (currentValue != $("#txtValue1").val() && $("#txtValue1").val() != "") { 
     CallCalculations(); 
    } 
}); 

$("#txtValue2").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $("#txtValue2").valid(); 
    if (currentValue != $("#txtValue2").val() && $("#txtValue2").val() != "") { 
     CallCalculations(); 
    } 
}); 
}); 

function CallCalculations() { 
    // Do Stuff 
}; 

Ich weiß, es ist möglich, diese Funktionen nach unten in eine allgemeinere ein (mit einer CSS-Klasse als Selektor anstelle einer ID) zu kondensieren, aber ich kann es einfach nicht scheinen, um herauszufinden, wie ich bin immer noch Neu bei jQuery/Javascript im Allgemeinen. Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Answer 1

Zuerst müssen Sie nicht den Wert zwischen Fokus und Unschärfe cachen. Sie können change() verwenden.

Wenn Sie eine Klasse auf alle Ihre Textfelder asign waren Sie wollen Kontrolle ... zB:

<input type="text" class="calculateOnChange" /> 

dann können Sie eine Klasse jQuery-Selektor:

$('.calculateOnChange').change(function() { 
    if($(this).val() != '') { 
     CallCalculations(this); 
    } 
}); 

Oder allgemeiner, Sie könnten auf jedes Textfeld im Dokument mit folgenden Werten anwenden:

$(':input[type=text]').change(/* ...etc */)); 

Answer 2

Sie können Sie id-Selektoren wie folgt kombiniert werden:

$("#txtValue1, #txtValue2").focus(//etc... 

Oder Sie können eine CSS-Selektor wie diese verwenden (nur die Klasse auf den entsprechenden HTML-Elemente, wie Sie festlegen jede andere Klasse):

$(".txtValue").focus(//etc... 

Und innerhalb die Unschärfe-Funktion können Sie sich auf $(this) beziehen, anstatt die Auswahl aufzurufen.

Endergebnis.

$(".txtValue").focus(function() {  
    currentValue = $(this).val();  
}  
).blur(function() {  
    $(this).valid();  
    if (currentValue != $(this).val() && $(this).val() != "") {  
     CallCalculations();  
    }  
}); 

Answer 3

Geben Sie Ihre Elemente eine Klasse wie textValues und dann können Sie dies tun:

$(document).ready(function() { 
var currentValue = {}; 

$(".textValues").focus(function() { 
    currentValue = $(this).val(); 
}).blur(function() { 
    var that = $(this); 
    that.valid(); 
    if (currentValue != that.val() && that.val() != "") { 
     CallCalculations(); 
    } 
}); 
}); 

function CallCalculations() { 
    // Do Stuff 
}; 

Answer 4

Sie es so für beide Eingänge Refactoring könnte:

$("#txtValue1, #txtValue2").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $(this).valid(); 
    if (currentValue != $(this).val() && $(this).val() != "") { 
     CallCalculations(); 
    } 
}); 

Answer 5

Sie ähnliche Dinge konsolidieren wie folgt:

$(document).ready(function() { 
    var currentValue = {}; 

    $("#txtValue1, #txtValue2, #txtValue3, #txtValue4").focus(function() { 
    currentValue = $(this).val(); 
    }).blur(function() { 
    $(this).valid(); 
    if (currentValue != $(this).val() && $(this).val() != "") { 
     // DO STUFF?? 
    } 
    }); 
}); 

Ich weiß nicht, ob Sie das suchen?