Question

当用户点击结尾处的 + 符号时，我想要为此<p>代码添加更多输入字段。

<p>
    More Links: <span class="glyphicon glyphicon-plus"></span></br>
    Link URL: <input type="text" name="blog_linku_one"> &nbsp; Link Name:  <input type="text" name="blog_linkn_one"></br>
</p>

因此，如果用户点击该加号，则会添加另一个带有新名称的链接：

<p>
    More Links: <span class="glyphicon glyphicon-plus"></span></br>
    Link URL: <input type="text" name="blog_linku_one"> &nbsp; Link Name: <input type="text" name="blog_linkn_one"></br>
    Link URL 2: <input type="text" name="blog_linku_two"> &nbsp; Link Name 2: <input type="text" name="blog_linkn_two"></br>
</p>

当用户点击加号时，此过程可以继续。

那么我怎么能用Javascript或jQuery做到这一点？

请任意...

Answer 1

请尝试以下代码。它将获得带有ID＆＃34;容器＆＃34;从DOM创建新字段并将字段附加到Container。

//Get container from DOM
var container = document.getElementById("container");

//Create an <input> element, set its type and name attributes 
var input = document.createElement("input");
input.type = "text";
input.name = "blog_linku_" + i;
input.required = "required";
//Add Element to div
container.appendChild(input);

您可以使用此代码段创建所需数量的元素。希望这会有所帮助。

Answer 2

您需要将append()个新字段添加到包含 + 符号的click()事件字段的父div。

$(document).ready(function() {
var i = 1;
  $('.add').on('click', function() {
    var field = '<br><div>Link URL '+i+': <input type="text" name="blog_linku_one[]"> &nbsp; Link Name '+i+':  <input type="text" name="blog_linkn_one[]"></div>';
    $('.appending_div').append(field);
    i = i+1;
  })
})

.add{
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    More Links: <span class="fa fa-plus add"></span>
    <div class="appending_div">
      <div>
      Link URL: <input type="text" name="blog_linku_one[]"> &nbsp; Link Name:  <input type="text" name="blog_linkn_one[]">
      </div>
    </div>

用户单击加号时如何添加更多输入字段

2 个答案: