克隆时如何将输入名称[0]计数到名称[1]

Question

我正在尝试以我在 Laravel 中使用的动态形式计算输入字段上的索引，但我不知道如何实现。

这是我当前正在使用的代码：

HTML：

<div id="language">
    <div class="language">
         <div class="row">
            <div class="form-group col-md-6 col-sm-6">
                <input class="form-control" placeholder="Language" name="language[0][name]" type="text">
            </div>
            <div class="form-group col-md-6 col-sm-6">
                <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select>
            </div>
            <p><a href="#" class="addsection">Add Section</a></p>
        </div>
     </div>
  </div>

JS：

 //Clone fields

 //define template
 var template = $('#language .language:first').clone();

 //define counter
 var sectionsCount = 1;
 //add new section
 $('body').on('click', '.addsection', function() {


     //increment
     sectionsCount++;

     //loop through each input
     var section = template.clone().find(':input').each(function(){

         //set id to store the updated section number
         var newId = this.id + sectionsCount;

         //update for label
         $(this).prev().attr('for', newId);

         //update id
         this.id = newId;

     }).end()

     //inject new section
         .appendTo('#language');
     return false;


 });

当我克隆字段时，如何使 [0] 计数？ 当我删除计数下降的字段时？

Answer 1

当您创建新元素时，您需要更新字段的克隆属性名称，以便值 [0] 可以是 [1]、[2]、....

代码是：

  var txtName = this.getAttribute('name');

  txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']');

  this.setAttribute('name', txtName);

为了删除一个部分，我添加了一个删除锚，代码是：

  $('body').on('click', '.removesection', function() {
       $(this).closest('.language').remove();
   });

sn-p：

$(function () {
  //Clone fields

  //define template
  var template = $('#language .language:first').clone();

  //define counter
  var sectionsCount = 1;
  //add new section
  $('body').on('click', '.addsection', function() {


    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

      //set id to store the updated section number
      var newId = this.id + sectionsCount;

      //update for label
      $(this).prev().attr('for', newId);

      //update id
      this.id = newId;
      var txtName = this.getAttribute('name');
      txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']');
      this.setAttribute('name', txtName);

    }).end()

    //inject new section
    .appendTo('#language');
    return false;


  });

  // remove current section
  $('body').on('click', '.removesection', function() {
    $(this).closest('.language').remove();
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="language">
    <div class="language">
        <div class="row">
            <div class="form-group col-md-6 col-sm-6">
                <input class="form-control" placeholder="Language" name="language[0][name]" type="text">
            </div>
            <div class="form-group col-md-6 col-sm-6">
                <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select>
            </div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="addsection">Add Section</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="removesection">Remove Section</a></p>
        </div>
    </div>
</div>