javascript - 通过Javascript将多种数据形式存入数组

Question

我有一些这样的表格:

<div class="well">
    <form>
        <span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
        <div class="form-group" style="margin:0">
            <label for="image-link">Image Link</label>
            <input type="text" name="image-link" value="" class="form-control" >
        </div>
        <div class="form-group" style="margin:0">                        
            <label for="content">Content</label>
            <textarea class="form-control" name="content" rows="10"></textarea>
        </div>
        <div class="form-group" style="margin:0">
            <label for="author">Author</label>
            <input type="text" name="author" value="" class="form-control" >
        </div>
    </form>
</div>

...

<div class="well">
    <form>
        <span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
        <div class="form-group" style="margin:0">
            <label for="image-link">Image Link</label>
            <input type="text" name="image-link" value="" class="form-control" >
        </div>
        <div class="form-group" style="margin:0">                        
            <label for="content">Content</label>
            <textarea class="form-control" name="content" rows="10"></textarea>
        </div>
        <div class="form-group" style="margin:0">
            <label for="author">Author</label>
            <input type="text" name="author" value="" class="form-control" >
        </div>
    </form>
</div>

当我点击添加按钮时，表单会添加得越来越多，因此会有多个表单。我想将多个数据提交到 json 数组中，如下所示:

"quotes":[
 {"image":"image_link","content":"content","author:"author"}
 {"image":"image_link","content":"content","author:"author"}
...
 {"image":"image_link","content":"content","author:"author"}
]

这是一个数组，将包含所有表单的数据。而且表格的数量并不固定。当我点击添加按钮时它会改变。那么我怎样才能自动做到这一点呢？非常感谢!

Answer 1

您可以通过调用以下函数来迭代页面上的所有表单元素:

function generateArrayData() {
  var forms = document.querySelectorAll(".well form");
  var quotes = [];

  for(var i = 0; i < forms.length; i++) {
    var form = forms[i];
    quotes.push({
      image: form.querySelector("input[name='image-link']").value,
      content: form.querySelector("textarea").value,
      author: form.querySelector("input[name='author']").value
    })  
  }
  return quotes;
}

其工作方式是 querySelectorAll 使用类 .well 加载 div 中页面上的所有表单元素。然后，我们迭代前一个查询中的元素，并使用 querySelector 提取我们想要提取的每个单独元素。