生成等于动态创建的表单元素的变量

Question

在previous question中，我学会了如何使用增加的元素ID生成动态表单元素。

现在，我很难找出一种方法来分配等于动态创建的表单元素的变量。

我的形式具有六个输入与ID作为这样：

box1_ 
box2_ 
box3_ 
box4_ 
box5_ 
box6_ 

形式中的每个克隆，添加递增标记的id的端部，使得所述第一克隆具有1，结束框第二个克隆的盒子以2结尾，等等。

这里是我的形式克隆代码，从借来的回答我刚才的问题：

$(document).ready(function() { 
    // show hidden inputs on POSITIVE selection 
    $(document).on('change', '.zero_form select.first_input', function() { 
     var sel = $(this).val(); 
     $(this).parent().find('.hide').toggle(sel == 'POSITIVE'); 
    }); 
    $(document).on('click', '.zero_form .removebutton', function() { 
     $(this).closest("div").remove(); 
    }); 

    // clone fields 
    var form_index = 0; 
    $("#add").click(function() { 
     form_index++; 
     $(this).parent().before($("#zero_form").clone().attr("id", "zero_form" + form_index)); 
     $("#zero_form" + form_index).css("display", "inline"); 
     $("#zero_form" + form_index + " :input").each(function() { 
      $(this).attr("id", $(this).attr("id") + form_index); 
     }); 
    }); 

}); 

我想动态创建，捕捉每一个元素的值，因为它是创建的变量。例如，如果我创建了两个克隆领域，我会投入使用的ID：

box1_1, box2_1, box3_1, box4_1, box5_1, box6_1 & 
box1_2, box2_2, box3_2, box4_2, box5_2, box6_2 

我希望中的变量这样：

var part1_1 = $('#box1_1').val(); 
var part2_1 = $('#box2_1').val(); 
... 
var part1_6 = $('#box1_6').val(); 
var part2_6 = $('#box2_6').val(); etc.. 

这是我试过的尝试生成动态变量 - 我没有得到任何控制台错误，但我无法验证变量是否存在并可在我的函数中访问？

脚本

function printOut() { 
    var dxOut = 'Output\n'; 

    var part1_ = []; 
    var part2_ = []; 
    var part3_ = []; 
    var part4_ = []; 
    var part5_ = []; 
    var part6_ = []; 



// I'm not sure how to set the length of i to the # of inputs, so I chose 30 for now 
    for (var i=1; i <= 30; i++){ 
    part1_[i] = $('#box1_'+i).val(); 
    part2_[i] = $('#box2_'+i).val(); 
    part3_[i] = $('#box3_'+i).val(); 
    part4_[i] = $('#box4_'+i).val(); 
    part5_[i] = $('#box5_'+i).val(); 
    part6_[i] = $('#box6_'+i).val(); 
    } 

    return part1_; 
    return part2_; 
    return part3_; 
    return part4_; 
    return part5_; 
    return part6_; 

    dxOut += part1_1 +'\n'+part2_1+'\n'+part3_1; 

     $('#output').val(dxOut); 

    } 

这里是一个fiddle，以防它帮助。

感谢您的帮助。

Answer 1

你有3种方式来做到这一点：

创建阵列

最简单的方法，也许是首选的方法if你没有特别的理由需要每个显式变量来使用数组。

// Adding to array 
var values = []; 
$('#zero_form ' + form_index + ' input').each(function() { 
    values.push($(this).val())); 
}); 

// Outputting from array 
values.forEach(function(value) { 
    // do something with value 
}); 

// Access just one 
console.log(values[0]); 

创建一个对象

这是非常相似的阵列的方法，但它允许你命名每个项目，如果这是很重要的更新版本。

// Adding to object 
var values = {}; 
$('#zero_form ' + form_index + ' input').each(function() { 
    values[$(this).attr('name')] = ($(this).val())); 
}); 

// Outputting from object 
for (var name in values) { 
    if (values.hasOwnProperty(name)) { 
     var value = values[name]; 
     // do something with value 
    } 
}); 

// Access just one 
console.log(values['item1']); 
// or 
console.log(values.item1); 

创建动态变量

如果你真的需要他们的各个变量，您可以创建和处理window像一个对象访问它们。

在你的具体情况下，我不会用这种技术做事。我只列出它来展示如何创建动态命名的变量。

// Adding to window/global 
$('#zero_form ' + form_index + ' input').each(function() { 
    window['input_' + $(this).attr('name')] = ($(this).val())); 
}); 

// Outputting from window/global 
for (var name in window) { 
    if (/^input_/.test(name) && window.hasOwnProperty(name)) { 
     var value = window[name]; 
     // do something with value 
    } 
}); 

// Access just one 
console.log(window['item1']); 
// or 
console.log(item1); 

Answer 2

1）通过你元素

3）创建一个空数组

2）循环填充数组，你去

emptyArray = []; 

$("#zero_form" + form_index + " :input").each(function() { 
    var inputValue = $(this).value; 
    emptyArray.push(inputValue); 
});