Как сконденсировать несколько функций jQuery в один?

Question

Я довольно новичок в jQuery и пытаюсь подобрать способы оптимизации моего кода. В настоящее время я работаю над приложением, в котором я вызываю некоторые методы расчета каждый раз, когда кто-то оставляет поле (.blur). Я хочу только назвать эти методы, когда выполняются определенные критерии (например, value! = 0). У меня есть 9 полей, где я сейчас рассчитываю и проверяю.

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

Я знаю, что это возможно, чтобы уплотнить эти функции вниз в еще один общий друг (используя класс CSS в качестве селектора вместо идентификатора), но я просто не могу показаться, чтобы понять это, как я до сих пор новый для jQuery/Javascript вообще. Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Во-первых, вам не нужно делать кеширование значений при фокусировке и размытии. Вы можете использовать change().

Если бы вы были Asign класс для всех текстовых полей, которые вы хотите проверить ... например:

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

, то вы можете использовать класс JQuery селектор:

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

Или в более общем плане, вы можете применить к каждому текстовому полю в документе:

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

Answer 2

Вы можете объединить Ваш номер селекторов, как это:

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

Или вы можете использовать селектор CSS, как это (просто установить класс на соответствующих HTML-элементов, как и любой другой класс):

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

И внутри Функция размытия вы можете ссылаться на $(this) вместо отзыва выбора.

Конечный результат.

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

Answer 3

Дайте элементы класса, как textValues, а затем вы можете сделать это:

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

Вы можете реорганизовать это так для обоих входов:

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

Answer 5

Вы можете объединить подобные вещи например:

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

Я не знаю, если это то, что вы ищете?