Question

好的，所以我使用了一个名为Formidable表单的插件，它提供了一个在表单中创建可重复部分的功能（这很棒，顺便说一句）。我试图做的是影响所有字段的相同内容。当你创建一个可重复的部分时，它会创建一个＆＃34; name＆＃34;具有以下布局示例的标识符 - name =＆＃34; item_meta [143] [0] [153]＆＃34; - [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页，所以请转到底部，然后点击＆＃34;下一步＆＃34;按钮查看此表单部分）。

由于

Answer 1

如果您想根据变量i找到DOM元素，那么您需要执行以下操作：

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

因为否则i内的$('input[name="item_meta[145][i][153]"]')将被解释为字母'i'，而不是其他内容。

找到此元素后，您可以在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);
}
})
});

可重复表单部分

2 个答案: