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

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}在模板文字中添加${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> 

有关模板文字的更多信息

希望这可以帮助 ：）