Come si condensano più funzioni jQuery in una?

Question

Sono abbastanza nuovo per jQuery ancora e sto cercando di raccogliere modi per aiutare a ottimizzare il mio codice. Attualmente sto lavorando a un'applicazione in cui sto chiamando alcuni metodi di calcolo ogni volta che qualcuno lascia un campo (.blur). Voglio solo chiamare questi metodi quando vengono soddisfatti determinati criteri (come valore! = 0). Ho 9 campi dove sto calcolando e controllando attualmente.

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

so che è possibile condensare queste funzioni verso il basso in un più generico (utilizzando una classe CSS come selettore invece di un ID), ma io proprio non riesco a capirlo, come io sono ancora nuovo in jQuery/Javascript in generale. Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

In primo luogo, non è necessario fare il caching valore messa a fuoco e sfocatura. È possibile utilizzare change().

Se si dovesse assegnare dei una classe a tutti i tuoi caselle di testo che si desidera controllare ... per esempio:

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

quindi è possibile utilizzare una classe selettore jQuery:

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

o più in generale, si potrebbe applicare ad ogni casella di testo nel documento con:

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

Answer 2

È possibile combinare voi selettori id come questo:

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

Oppure si può utilizzare un selettore CSS come questo (è sufficiente impostare la classe sugli elementi rilevanti HTML come si farebbe con qualsiasi altra classe):

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

E all'interno di la funzione sfocatura è possibile fare riferimento a $(this) anziché richiamare la selezione.

risultato finale.

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

Answer 3

Lascia la tua elementi una classe come textValues e quindi si può fare questo:

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

Si potrebbe refactoring come questo per entrambi gli ingressi:

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

Answer 5

è possibile consolidare cose simili in questo modo:

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

Non so se questo è quello che stai cercando?