Я использую сценарий плагина O/S, который создает идентификатор, который выглядит как элементы массива следующим образом:
<select name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select name="serviceTypeID[2]" id="serviceTypeID[2]" ...
<select name="serviceTypeID[3]" id="serviceTypeID[3]" ...
<select name="serviceTypeID[4]" id="serviceTypeID[4]" ...
<select name="serviceTypeID[5]" id="serviceTypeID[5]" ...
<select name="serviceTypeID[6]" id="serviceTypeID[6]" ...
<select name="serviceTypeID[7]" id="serviceTypeID[7]" ...
<select name="serviceTypeID[8]" id="serviceTypeID[8]" ...
<select name="serviceTypeID[9]" id="serviceTypeID[9]" ...
<select name="serviceTypeID[10]" id="serviceTypeID[10]" ...
Как я могу сконденсировать следующий сценарий jquery, поэтому мне не нужно жестко кодировать-повторять блок для всех 10 экземпляров элемента select html? Могу ли я настроить скрытый элемент формы с установленным для него значением индекса и использовать что-то вроде этого.(). Val()? Это немного превышает мои навыки кодирования. Благодарю.
$('#serviceTypeID\\[1\\],#serviceTypeID\\[2\\],#serviceTypeID\\[3\\],#serviceTypeID\\[4\\],#serviceTypeID\\[5\\],#serviceTypeID\\[6\\],#serviceTypeID\\[7\\],#serviceTypeID\\[8\\],#serviceTypeID\\[9\\],#serviceTypeID\\[10\\]').change(function() {
// 1st identical instance of the block
var first = parseInt( $('#firstService\\[1\\]').val() );
var second = parseInt( $('#secondService\\[1\\]').val() );
var third = parseInt( $('#thirdService\\[1\\]').val() );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\[1\\]').val( ( first + second + third + ' Total') );
// 2nd identical instance of the block
first = parseInt( $('#firstService\\[2\\]').val() );
second = parseInt( $('#secondService\\[2\\]').val() );
third = parseInt( $('#thirdService\\[2\\]').val() );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\[2\\]').val( ( first + second + third + ' Total') );
// 3rd identical instance of the block
first = parseInt( $('#firstService\\[3\\]').val() );
second = parseInt( $('#secondService\\[3\\]').val() );
third = parseInt( $('#thirdService\\[3\\]').val() );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\[3\\]').val( ( first + second + third + ' Total') );
//and so on up to 10 currently
// 10th identical instance of the block
first = parseInt( $('#firstService\\[10\\]').val() );
second = parseInt( $('#secondService\\[10\\]').val() );
third = parseInt( $('#thirdService\\[10\\]').val() );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\[10\\]').val( ( first + second + third + ' Total') );
});
Сначала вам нужен атрибут класса для этого выбора, для более простого и простого выбора.
<select class="serviceType" name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select class="serviceType" name="serviceTypeID[2]" id="serviceTypeID[2]" ...
Затем вы можете использовать для цикла в вызове функции:
$('.serviceType').change(function() {
for(var i=1; i<=10; i++){
var first = parseInt( $('#firstService\\['+ i +'\\]').val(), 10 );
var second = parseInt( $('#secondService\\['+ i +'\\]').val(), 10 );
var third = parseInt( $('#thirdService\\['+ i +'\\]').val(), 10 );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\['+ i +'\\]').val( ( first + second + third + ' Total') );
}
});
Вы можете использовать следующий фрагмент, чтобы перебирать ваши поля выбора с текущим HTML-кодом. При этом я подозреваю, что знание большей части вашей структуры HTML (родители ваших избранных) позволило бы более простое решение.
// All select boxes.
var selects=jQuery("select[name^='serviceTypeID']").change(function() {
// Pattern to find the counter.
var matcher = new RegExp("serviceTypeID\\[(\\d+)\\]");
// Invoke your code for each select box.
jQuery.each(selects, function(index, select){
// Get the name.
var name=jQuery(select).prop("name");
// Extract the counter.
var number = matcher.exec(name)[1];
// Your block.
var first = parseInt( $('#firstService\\['+number+'\\]').val(), 10 );
var second = parseInt( $('#secondService\\['+number+'\\]').val(), 10 );
var third = parseInt( $('#thirdService\\['+number+'\\]').val(), 10 );
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\['+number+'\\]').val( ( first + second + third + ' Total') );
});
});
может быть, петля?
for (var i = 1; i <= 10; i++) {
$('#serviceTypeID\\[' + i + '\\]').change(function () {
var first = parseInt($('#firstService\\[' + i + '\\]').val(), 10);
var second = parseInt($('#secondService\\[' + i + '\\]').val(), 10);
var third = parseInt($('#thirdService\\[' + i + '\\]').val(), 10);
if (isNaN(first)) first = 0;
if (isNaN(second)) second = 0;
if (isNaN(third)) third = 0;
$('#serviceTotal\\[' + i + '\\]').val((first + second + third + ' Total'));
});
}
parseInt
:var x = parseInt(foo, 10);
,