创建一个数组

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种方法可以执行此操作：

创建一个数组

最简单的方法，也许是首选的方法，如果你没有特别的理由需要显式变量，那就是使用一个数组。

// 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）创建一个空数组

2）循环你元素

3）随时填充数组

emptyArray = [];

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

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

2 个答案:

创建一个数组

创建对象

创建动态变量