javascript - 从同一类获取多个输入值并将其存储在 json 变量中

Question

我在这里得到了一个将其数据存储在数组中的多个值。我预计来自该领域的数据将与每一行分开。

实际结果：["firstname","middlename","lastname","bday","firstname", ...]

预期：["firstname","middlename","lastname","bday"],["firstname","middlename","lastname","bday"]

请看下面的代码：

$(function() {
  $("#btnAddChild").click(function(e) {
    e.preventDefault();
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>First Name:</p><input type="text" class="form-control" id="child_fname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Middle Name:</p><input type="text" class="form-control" id="child_mname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Last Name:</p><input type="text" class="form-control" id="child_lname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Birthdate:</p><input type="date" class="form-control" id="child_bday" /></div></div>');

  });
});

function GetInfo() {
  var info = [];
  $(".child_sub").each(function() {

    $(this).children("input").each(function() {
      info.push(this.value);
    });

  });
  console.log(info);
  event.preventDefault();
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<button class="btn btn-info btn-sm" id="btnAddChild">ADD</button>
<button class="btn btn-success" onclick="GetInfo();"> GET INFO</button>
<div class="row" id="childinfo_div">

</div>

标签： javascriptjqueryhtml

Answer 1

问题是因为您直接循环遍历input元素.child_sub。因此，您正在创建一个包含所有值的数组。

要创建您想要的结构，这是一个嵌套数组，您需要遍历每个集合，然后是其中的每个输入，如下所示：

$(function() {
  $("#btnAddChild").click(function(e) {
    e.preventDefault();
    var $row = $('<div class="child_sub_container"></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>First Name:</p><input type="text" class="form-control" id="child_fname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Middle Name:</p><input type="text" class="form-control" id="child_mname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Last Name:</p><input type="text" class="form-control" id="child_lname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Birthdate:</p><input type="date" class="form-control" id="child_bday" /></div></div>');
    $row.appendTo('#childinfo_div');
  });

  $('#btnGetInfo').on('click', function() {
    var info = $('.child_sub_container').map(function() {
      return [$(this).find(".child_sub input").map(function() {
        return this.value.trim();
      }).get()];
    }).get();

    console.log(info);
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<button class="btn btn-info btn-sm" id="btnAddChild">ADD</button>
<button class="btn btn-success" id="btnGetInfo">GET INFO</button>
<div id="childinfo_div"></div>

请注意，我删除了onclick它们已过时且不应使用的内联属性。我更改了逻辑以使用不显眼的事件处理程序。

我还建议您考虑在input单击“添加”时克隆添加到 DOM 的元素，或者使用模板库，因为在 JS 逻辑中包含这么多 HTML 是不好的做法。