¿Cómo puedo condensar varias funciones jQuery en una?

Question

Todavía soy bastante nuevo en jQuery y estoy tratando de encontrar maneras de ayudar a optimizar mi código. Actualmente estoy trabajando en una aplicación en la que estoy llamando a algunos métodos de cálculo cada vez que alguien deja un campo (.blur). Solo quiero llamar a estos métodos cuando se cumplen ciertos criterios (como value! = 0). Tengo 9 campos donde estoy calculando y comprobando actualmente.

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

sé que es posible condensar estas funciones hacia abajo en una más genérica (usando una clase CSS como un selector en lugar de un ID) pero simplemente parece que no puede deducirlo mientras todavía estoy nuevo en jQuery/Javascript en general. Cualquier ayuda sería muy apreciada. ¡Gracias!

Answer 1

En primer lugar, no necesita hacer el almacenamiento en caché de valores en el enfoque y el desenfoque. Puede usar change().

Si se va para asignar una clase a todos sus cuadros de texto que desea comprobar ... ej:

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

entonces se puede utilizar una clase jQuery selector:

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

o, más generalmente, Puede aplicar a cada cuadro de texto en el documento con:

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

Answer 2

Puede combinar le selectores de ID de esta manera:

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

O puede utilizar un selector CSS como esto (acaba de establecer la clase en los elementos pertinentes HTML como lo haría con cualquier otra clase):

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

Y dentro de la función de desenfoque puede consultar $(this) en lugar de recordar la selección.

Resultado final.

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

Answer 3

Dé a sus elementos de una clase como textValues y entonces usted puede hacer esto:

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

Usted podría refactorizar como esto para ambas entradas:

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

Answer 5

puede consolidar cosas similares como este:

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

No sé si eso es lo que estás buscando?