同一对象被推入arrayList

Question

var totalList=[];
$("#formContainer").on("click","button",function() {
  var selector = "div."+$(this).data("type")+"-table";
  var $div = $(this).closest(selector);
  var $newDiv = $div.clone();
  $newDiv.find(":input").val(""); // clear all
  $newDiv.find("[type=number]").val(0); // clear numbers
  $newDiv.find(".sum").text(0); // clear total
  $newDiv.insertAfter($div)
   var user_profile = [
          
          {
            assessmentType: "PRE",
            assessCatId :1,
            assessReason:$(".customReason").val(),
            assessAmount:$(".customAmount").val(),
            assessPenalty: $(".customPenalty").val()
            
          }
          
      ]

    totalList.push(user_profile);
    console.log(totalList);
});

$("form").submit(function() {
  event.preventDefault();
});
$("#formContainer").on("input","[type=number]",function() {
  $("#formContainer [type=number]").each(function() {

    
    var $row = $(this).closest(".row");
    var $fields = $row.find("[type=number]");
    var val1 = $fields.eq(0).val();
    var val2 = $fields.eq(1).val();
    var tot = (isNaN(val1)?0:+val1)+(isNaN(val2)?0:+val2)
    $row.find(".sum").text(tot);
  });
  var total = 0;
  $(".sum").each(function() {

    total += isNaN($(this).text())?0:+$(this).text()
  }); 
  console.log(total);
  $("#tot").text(total);

});	


 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form id="myForm">
  <div id="formContainer" class="col-md-12" style="float: none;">
    <!--  <button onclick="myFunction()" class="pull-right">+</button> -->
    <div style="margin-bottom: 30px;">
      <div class="form-group row">
        <div class="col-md-1"></div>
        <div class="col-md-4">
          <label>Reason</label>
        </div>
        <div class="col-md-2">
          <label>Amount</label>
        </div>
        <div class="col-md-2">
          <label>Penalty</label>
        </div>
        <div class="col-md-1">Total</div>
        <div class="col-md-2">Action</div>
      </div>
      <div class="customs-table row">
        <div class="col-md-1">
          <label>Customs</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control customReason" id="customReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" id="customAmount" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" id="customPenalty" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button data-type="customs" class="add-customs">+</button>
        </div>
      </div>
      <div class="vat-table row">
        <div class="col-md-1">
          <label>VAT</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control vatReason" name="vatReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button class="add-vat" data-type="vat">+</button>
        </div>
      </div>
      <div class="excise-table row">
        <div class="col-md-1">
          <label>Excise</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control exciseReason" name="exciseReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button data-type="excise" class="add-excise">+</button>
        </div>
       
      </div>
       <div class="col-md-1 pull-right">
          <label>Total:</label> <b> <span id="tot">0</span></b>
        </div>
    </div>
    <button type="submit" class="btn btn-success pull-right">Submit</button>
  </div>
</form>

在这里我单击“ +”按钮，然后出现第二个自定义行。

我试图将它们推入名为"totalList=[];"的arrayList中，但是它反复重复推同一对象，因此：（请参见Array1和array2相同，尽管它们的数据形式不同）

我如何使此arrayList如此动态以至于仅推送当前对象而不是旧对象？我无法将新创建的对象推入arrayList。如何更改我的arraylist？

Answer 1

您不想在点击添加时间执行此操作

只需在提交时执行此操作：

$("form").submit(function() {
  event.preventDefault();
  var user_profile = [];
  $(".row").each(function(i) {
    var $fields = $(this).find(":input");
    if ($fields.length > 0) {
      var cat = $(this).find("div>label").eq(0).text(); // use the label of the row
      var catId = ["","Customs","VAT","Excise"].indexOf(cat);
      user_profile.push({
        assessmentType: "PRE",
        assessCatID : catId, 
        assessReason: $fields.eq(0).val(),
        assessAmount: $fields.eq(1).val(),
        assessPenalty: $fields.eq(2).val()
      });
    }
  });
  console.log(user_profile);

  $.ajax({
    url: "someserverfunction",
    data: JSON.encode(user_profile),
    success : function(data) { }
    error: function() { }
  });  
});

还删除您添加到我的代码中的ID。不需要它们