如何获取多个追加文本框的值？

Question

我有一个文本框，它可以添加。我想要获取每个文本框的值。

$('#entryData').append('<div><input type="text" id="quantity"></div>');
var total = $('#quantity').val();
console.log(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="entryData">
  <input type="text" id="quantity">
  <input type="button" value="+">
  <input type="button" value="Total">
</div>
   

但是我只能获取第一个文本框的值，而不能获取其他文本框的值。

- dain

---

使用 class 替代 id 并进行迭代。 - Sumesh TG

#entryData 是什么？ - Anshuman

请发布您的完整代码。 - Cata John

对我来说仍然不起作用。 - dain

我已经编辑了这篇帖子。 - dain

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='entryData' >
 <input type="text" class='quantity'>
 <input type="button" value="+" id='add'>
 <input type="button" value="Total" id='total'>
</div>

<script>
$(document).ready(function(){
$('#add').click(function(){
 $('#entryData').append('<div><input type="text" class="quantity"></div>');
});
$('#total').click(function(){
var total=0;
 $('.quantity').each(function(index,quantity){
   total=total+parseInt($(this).val());
 });
   alert(total);
});

});

</script>

我猜您想要做的是这个吗？

- Sumesh TG

Answer 2

或者像这样：

或者像这样：

<div id='entryData' >
 <input type="number" class='quantity'>
 <input type="button" value="+" id='add'>
 <input type="button" value="Total" id='total'>
</div>

如果您期望输入数字，请将字段设置为数字。

//this should come from helper method file/lib - for reusability
const sum = (accumulator, currentValue) => accumulator + currentValue;
const mapToInt = (idx,element) => { if (element.value !== "") { return parseInt(element.value, 10); } }

$(document).ready(() =>{

    $('#add').click( () => {
        $('#entryData').append('<div><input type="number" class="quantity" /></div>');
    });

    $('#total').click( () => {
        let total = $(".quantity").map(mapToInt).get().reduce(sum);
        console.log ( total );
    });
});

编辑: 如果您考虑采用更多的功能方法，那么sum（聚合函数）和mapToInt可以被重复使用。

- Bakudan