How do I condense multiple jQuery functions into one?

Question

Hey all,

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

Give your elements a class like textValues and then you can do this:

$(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 3

You could refactor it like this for both inputs:

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

Answer 4

Don't worry too much about premature optimization, for starters. On the other hand, it never hurts to keep your code clean, don't repeat yourself, all that.

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

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

function CallCalculations() {
    // Do Stuff
};

Answer 5

You can consolidate similar things like this:

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

I don't know if that is what you are looking for?

Answer 6

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 */ ));