javascript - jQuery 获取内部文本输入的值

Question

我有一个表单，可以动态添加一行文本输入，如果用户想要添加新行，它会自动使用与之前的输入字段具有相同 id 和类的输入字段填充新行。我的问题是如何获取每个文本输入字段的值？

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
        </div>
    </div>
</div>

Answer 1

这就是我所做的:我首先对您的架构进行了一些更改，将包含产品名称和价格的输入字段放入全局项目 div 中。现在，每个产品(项目)都有自己的名称和价格字段!然后使用 Jquery，如果我们单击“add-item”，我会获取第一个项目，制作一个 externalHTML，并将其添加到包含所有项目的 div 中

然后，为了获取所有项目，我创建了一个名为 get-items 的按钮，按下该按钮时，我创建一个数组，浏览所有项目，对于每个项目，我获取其字段名称和插入的价格字段大批!

$("document").ready(function () {
	
  $("#add-item").on('click', function () {
  	$('.add-items').append($('.add-items .item')[0].outerHTML)
  })
  
 
  $("#get-items").on('click', function () {
  var arr = []
   $.each($(".item"), function () {
     arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
   })
   console.log(arr)
  })
})

<!-- I presume you've included Jquery like this -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
      <div class="item">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
      </div>
     </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
    </div>
    <div class="col-md-3 col-sm-12 text-right">
            <button id="get-items" class="addBtn" type="button">Get Items Array</button>
    </div>
</div>