时间戳

首页 > 解决方案 > 无法将 id 与值一起推送到 JavaScript 数组

jquery - 无法将 id 与值一起推送到 JavaScript 数组

问题描述

我编写了代码来创建一个动态数组，以循环遍历 div 内的所有控件并构建一个数组，但不确定出了什么问题但无法将 id 推送到数组。当我将它记录到控制台时，我可以看到 Id

$('#btnClick').click(function() {
  saveDiv($("#div1"))
});

function saveDiv(div) {
  var controlValues = [];
  div.find('input:text, input:password, input:file, select, textarea')
    .each(function() {
      //console.log($(this).attr("id"));
      var id = $(this).attr("id");
      var quote_str = "'" + id + "'";
      console.log(id);
      controlValues.push({
        quote_str: $(this).val()
      });
      console.log(controlValues);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    <div class="row g-3">
      <div class="col-sm-6">
        <label for="vesselname" class="form-label">Vessel Name</label>
        <input type="text" class="form-control" id="vesselname" placeholder="Enter Vessel Name" value="">
      </div><br />
      <div class="col-sm-6">
        <label for="vesseltype" class="form-label">Vessel Type</label>
        <select class="form-select" id="vesseltype">
          <option>--Select--</option>
          <option>Test</option>
        </select>
      </div><br />
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="" id="formCheck5">
        <label class="form-check-label" for="formCheck5">Material Damage</label>
      </div>
      <br>
      <button id="btnClick">Click me</button>
    </div>
  </div>
</div>

而不是 Id 我总是得到 id 作为quote_str

标签： jquery

解决方案

更新：根据 OP 的评论，您希望将动态键作为 id 变量，您可以通过将 var 放在方括号内来实现[id]

controlValues.push({
  [id]: $(this).val(),
});

WORKING CODE BELOW 

$('#btnClick').click(function() {
  saveDiv($("#div1"))
});

function saveDiv(div) {
  var controlValues = [];
  div.find('input:text, input:password, input:file, select, textarea')
    .each(function() {
      //console.log($(this).attr("id"));
      var id = $(this).attr("id");
      var quote_str = "'" + id + "'";
      console.log(id);
      controlValues.push({
        [id]: $(this).val(),
      });
      console.log(controlValues);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    <div class="row g-3">
      <div class="col-sm-6">
        <label for="vesselname" class="form-label">Vessel Name</label>
        <input type="text" class="form-control" id="vesselname" placeholder="Enter Vessel Name" value="">
      </div><br />
      <div class="col-sm-6">
        <label for="vesseltype" class="form-label">Vessel Type</label>
        <select class="form-select" id="vesseltype">
          <option>--Select--</option>
          <option>Test</option>
        </select>
      </div><br />
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="" id="formCheck5">
        <label class="form-check-label" for="formCheck5">Material Damage</label>
      </div>
      <br>
      <button id="btnClick">Click me</button>
    </div>
  </div>
</div>

推荐阅读