How do I condense multiple jQuery functions into one?

Question

I'm fairly new to jQuery still and am trying to pick up ways to help optimize my code. I'm currently working on an application in which I'm calling some calculation methods everytime someone leaves a field (.blur). I only want to call these methods when certain criteria are met (such as value != 0). I have 9 fields where I'm calculating and checking currently.

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

I know it's possible to condense these functions down into one more generic one (using a CSS class as a selector instead of an ID) but I just can't seem to figure it out as I'm still new to jQuery / Javascript in general. Any help would be greatly appreciated. Thank you!

Answer 1

You can combine you id selectors like this:

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

Or you can use a CSS selector like this (just set the class on the relevant HTML elements as you would any other class):

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

And inside the blur function you can refer to $(this) instead of recalling the selection.

Final result.

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

Answer 2

Firstly, you don't need to do the value caching on focus and blur. You can use change().

If you were to asign a class to all your textboxes you want checking... eg:

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

then you can use a class jQuery selector:

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

Or more generally, you could apply to each text box in the document with:

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