如何在單擊按鈕時將對象添加到數組中？

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> 

有關模板文字的更多信息

希望這可以幫助 ：）