Изменение элемента JQuery в разделе повторяющихся форм

Question

ОК, поэтому я использую плагин под названием «Необычные формы», который предлагает функцию создания повторяемых разделов в форме (что является удивительным, кстати). То, что я пытаюсь сделать, влияет на все разделы полей одинаково. Когда вы делаете раздел повторяемым, он создает идентификатор «name» со следующим примером макета: name = «item_meta [143] [0] [153]» - где [0] - это первый раздел. Затем следующий раздел содержит [1], следующий - [2] и т. Д.

Итак, я пытаюсь изменить общее поле для каждого раздела с помощью некоторой пользовательской математики. Я получил его для работы в первом разделе, но для следующих разделов мне нужно найти автоматический путь для следующих секций с помощью селектора [i].

Я попытался сделать это с помощью цикла, но я думаю, что с моей логикой может быть что-то не так. Во всяком случае, вот что я получил

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
for (i=0; i < $(".frm_field_153_container input").length; i++){ 
$('input[name="item_meta[145][i][153]"]').change(function(){ 
var val1 = $("input[name='item_meta[145][i][153]']").val(); 
var val2 = $("select[name='item_meta[145][i][144]']").val(); 
var cost = val2.substring(val2.indexOf("$")+1); 
console.log(cost); 
if (val1 >=24 && val1 <= 47) { 
var newcost = parseFloat(((cost-3) * val1).toFixed(2)); 
console.log(newcost); 
$("[name='item_meta[145][i][154]']").val(newcost);} 
if (val1 >=48 && val1 <= 71) { 
var newcost = parseFloat(((cost-5) * val1).toFixed(2)); 
console.log(newcost); 
$("[name='item_meta[145][i][154]']").val(newcost);} 
if (val1 >=72 && val1 <= 143) { 
var newcost = parseFloat(((cost-6) * val1).toFixed(2)); 
console.log(newcost); 
$("[name='item_meta[145][i][154]']").val(newcost);} 
if (val1 >=144 && val1 <= 287) { 
var newcost = parseFloat(((cost-7) * val1).toFixed(2)); 
console.log(newcost); 
$("[name='item_meta[145][i][154]']").val(newcost);} 
if (val1 >=288) { 
var newcost = parseFloat(((cost-8) * val1).toFixed(2)); 
console.log(newcost); 
$("[name='item_meta[145][i][154]']").val(newcost);} 
}); 
} 
}); 
</script> 

Страница находится в прямом эфире на www.highschoolimpressions.com/order-form/ - (это на странице 2, чтобы идти на дно и нажмите кнопку «Далее», чтобы увидеть это форма часть).

Благодаря

Answer 1

Если вы хотите, чтобы найти DOM элементов на основе вашей переменной i, то вам нужно сделать что-то вроде следующего:

$('input[name="item_meta[145]['+i+'][153]"]') 

поскольку в противном случае i внутри $('input[name="item_meta[145][i][153]"]') будет интерпретироваться только как буква «я» и ничего больше.

После того, как вы нашли этот элемент, вы можете использовать свою ссылку this внутри метода .change() как это (вам не придется искать его снова):

$('input[name="item_meta[145]['+i+'][153]"]').change(function(){ 
var val1 = $(this).val(); 
... 

Действительно весь цикл можно записать гораздо проще в стиле Jquery, как

$(".frm_field_153_container input").change(function(){ 
var val1 = $(this).val(); 
... 

Это будет связывать .change() метод для всех ваших найденных полей ввода. Остальная часть кода, конечно, также должна быть рассмотрена, чтобы заменить устаревшие i с подходящими относительными выражениями траверса, чтобы найти другие связанные элементы DOM.

Answer 2

Я закончил тем, что пошел по этому маршруту и ​​отказался от идеи прокрутки.

// ---------- Product Number 1 ---------------------------------------------------------------vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv 
jQuery(document).ready(function($){ 
    //Assign consistent classes to necessary form elements 
var productIDSelect = jQuery('select[id^="field_productid"]'); 
    productIDSelect.attr('class', function (index) { 
    return 'productid-' + index; 
}); 
var totalQuantField = jQuery('input[id^="field_totalquant"]'); 
    totalQuantField.attr('class', function (index) { 
    return 'prodtotalquant-' + index; 
}); 
var costEachField = jQuery('input[id^="field_prodcosteach"]'); 
    costEachField.attr('class', function (index) { 
    return 'prodcosteach-' + index; 
}); 
var totalCostField = jQuery('input[id^="field_prodtotalcost"]'); 
    totalCostField.attr('class', function (index) { 
    return 'prodtotalcost-' + index; 
}); 
var prodEPLApplyCheck = jQuery('input[id^="field_eplapply"]'); 
    prodEPLApplyCheck.attr('class', function (index) { 
    return 'prodeplapply-' + index; 
}); 
    // If any of these fields get changed, perform this recalculate function 
jQuery('.prodtotalquant-0, .productid-0, .prodeplapply-0, #field_indnamenum-1, #field_indnamenum-2, #field_roster-0, #field_roster-1, #field_classsign-0, #field_sleevefirst-0, #field_sleevesecond-0').change(function(){ 
    // Get the total quantity of garments input by the user 
var val1 = jQuery('.prodtotalquant-0').val(); 
    // Get the value associated with the selected garment (string) 
var val2 = jQuery('.productid-0').val(); 
    // Get the Base Cost of the Garment (convert val2 to a valid number value 
var cost = parseFloat(val2.substring(val2.indexOf("$")+1)); 
    // If Individual Name on back is desired, then apply charge 
if (jQuery('#field_indnamenum-1').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
    cost=cost+6; 
} 
    // If Individual Number on back is desired, then apply charge 
if (jQuery('#field_indnamenum-2').is(':checked') && jQuery('prodeplapply-0').is(':checked')) { 
    cost=cost+6; 
} 
//---------------Begin Actual Calculations ---------------------------------- 
//--------------------------------------------------------------------------- 
    //Base Minimum Quantity Validating 
if (val1 <=11){ 
     cost="Must Order at least 12"; 
    } 
    //Begin Stepping through the pricing break points and checking for extra print locations 
    //Step 1 - Minimum 
if (val1 >=12 && val1 <= 23) { 
    //Check for Back Prints 
    if (jQuery('#field_indnamenum-1, #field_indnamenum-2, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost+4; 
     console.log(cost); 
    } else { 
     console.log(cost); 
     cost = parseFloat(cost).toFixed(2);} 
    //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+4; 
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+4; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat(((cost) * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
    //Step 2 
if (val1 >=24 && val1 <= 47) { 
    //Check for Back Prints and apply charge 
    if (jQuery('#field_indnamenum-0, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost; 
    } else { 
     cost = parseFloat(cost-3).toFixed(2);} 
     //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+3; 
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+3; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat((cost * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
    //Step 3 
if (val1 >=48 && val1 <= 71) { 
    //Check for Back Prints and apply charge 
    if (jQuery('#field_indnamenum-0, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost-2.5; 
    } else { 
     cost = parseFloat(cost-5).toFixed(2);} 
     //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+2.5;  
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+2.5; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat((cost * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
    //Step 4 
if (val1 >=72 && val1 <= 143) { 
     //Check for Back Prints and apply charge 
    if (jQuery('#field_indnamenum-0, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost-4; 

    } else { 
     cost = parseFloat(cost-6).toFixed(2);} 
     //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+2; 
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+2; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat((cost * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
    //Step 5 
if (val1 >=144 && val1 <= 287) { 
    //Check for Back Prints and apply charge 
    if (jQuery('#field_indnamenum-0, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost-5.5; 
    } else { 
     cost = parseFloat(cost-7).toFixed(2);} 
     //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+1.5;  
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+1.5; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat((cost * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
    //Step 6 - Final 
if (val1 >=288) { 
    //Check for Back Prints and apply charge 
    if (jQuery('#field_indnamenum-0, #field_roster-0, #field_roster-1, #field_classsign-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = cost-7; 
    } else { 
     cost = parseFloat(cost-8).toFixed(2);} 
     //Check for sleeve prints and apply charge 
    if (jQuery('#field_sleevefirst-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
     cost = parseFloat(cost)+1; 
     //Check for second sleeve print and apply charge 
     if (jQuery('#field_sleevesecond-0').is(':checked') && jQuery('.prodeplapply-0').is(':checked')) { 
      cost = parseFloat(cost)+1; 
     } 
    } else { 
     cost = parseFloat(cost).toFixed(2);} 
jQuery('.prodcosteach-0').val(cost); 
var newcost = parseFloat((cost * val1).toFixed(2)); 
jQuery('.prodtotalcost-0').val(newcost); 
} 
}) 
});