代码之家 › 专栏 › 技术社区 › Developer

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

jquery

Developer · 技术社区 · 3 年前

我已经编写了代码来创建一个动态数组,以循环通过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>

我总是把身份证当作 quote_str

0 回复 | 直到 3 年前

Tushar Gupta 3 年前

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

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

工作代码如下

$('#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>