Question

我有一个用户案例场景，当有一个结构像“ div”类的父div时。在该div中，存在2个子div。有一个“添加更多”链接。每当用户单击链接整个“内部div”结构的链接时，都将追加。它可以发生多次。现在的要求是，我必须将所有值发送到数组中的服务器，其中多个对象将保存所有最大和最小字段值的值。现在我当前面临的问题是，我只能将最后一个元素值推入数组。下面是我的JavaScript代码

我尝试使用jQuery和JavaScript。两次我都无法产生预期的结果。

var count = 0;

$('#addNew').on('click', function() {
  count++;
  var innerContent = `<div class='col-xs-6'><input type='text' id='minval'` + count + ` /></div><div class='col-xs-6'><input type='text' id='maxval'` + count + ` /></div>`
  $('.row').append(innerContent);
});

$('#save').on('click', function() {
  var value = [];
  for (var i = 0; i <= count; i++) {
    value.push({
      minval: $('#minval' + i).val(),
      maxval: $('#maxval' + i).val(),

    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-xs-6'><input type='text' id='minval0' /></div>
  <div class='col-xs-6'><input type='text' id='maxval0' /></div>
</div>
<button id='addNew'>Add More</button>

我希望输出value

[{minval:1,maxval:2},{minval:2,maxval:3},{minval:3,maxval:4}]

Answer 1

你去了。您为新添加的商品创建的ID生成不正确。以下是有效的代码段。您只需使用${variable}将变量的值添加到模板文字中即可。

var count = 0;

$('#addNew').on('click', function() {
  count++;
  var innerContent = `<div class='col-xs-6'><input type='text' id='minval${count}' /></div><div class='col-xs-6'><input type='text' id='maxval${count}' /></div>`
  $('.row').append(innerContent);
});

$('#save').on('click', function() {
  var value = [];
  for (var i = 0; i <= count; i++) {
    value.push({
      minval: $('#minval' + i).val(),
      maxval: $('#maxval' + i).val(),

    });
  }
  console.log(value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-xs-6'><input type='text' id='minval0' /></div>
  <div class='col-xs-6'><input type='text' id='maxval0' /></div>
</div>
<button id='addNew'>Add More</button>
<button id='save'>Save</button>

有关EPEL

的更多信息

希望这会有所帮助：）

如何在单击按钮时将对象添加到数组中？

1 个答案: