Question

我有以下HTML代码：

<div class="multiple_tour_wrap">
   <div class="row">
      <div class="col-md-12">
         <div class="form-group">
            <h5 class="badge badge-details multiple_counting">Details 1</h5><hr><br/>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Guest Name</label>
            <input type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Email Address</label>
            <input type="email" name="mul_email[0]" class="form-control" placeholder="Email Address">
         </div>
      </div>
   </div>
   <div class="trip_wrapper">
      <div class="col-md-1">
         <div class="form-group">
            <h5 class="badge badge-success trip_counting">Trip 3</h5>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>From</label>
            <input type="text" name="mul_from[0]" class="form-control" placeholder="From">
         </div>
      </div>
      <div class="col-md-12">
         <div class="change_trip text-right">
            <a class="btn add_button_trip trip_btn">Add Trip(+)</a>
         </div>
      </div>
   </div> <!--end trip_wrpapper -->
   <div class="row">
      <div class="col-md-12">
         <div class="form-group multiple_change text-right">
            <a class="btn multiple_add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
         </div>
      </div>
   </div>
</div> <!--end multiple_tour_wrap -->

存在2个链接以添加更多字段。

1）添加更多详细信息（+）（使用类multiple_add_button）
2）添加行程（+）（使用类add_button_trip）

添加更多详细信息（+）链接可克隆完整的multiple_tour_wrap类div，而添加行程（+）可以克隆trip_wrapper div。我已将名称设置为具有键[0]的数组，因为我需要添加更多字段

和

为此，当再添加一个字段时，我需要为全名数组添加1。因此名称为：

mul_gname[1]
mul_email[1]
mul_from[1]
mul_to[1]

如果再添加2个字段，则为2、3、4等。

我正在使用jQuery克隆方法添加更多字段，但是添加更多字段时如何更改名称？

jQuery代码：

$("body").on("click",".multiple_add_button",function(){
   var html = $(".multiple_tour_wrap").first().clone();      
   $(".multiple_tour_wrap").last().after(html);

   $('.multiple_counting').each(function(i, elm) {
      $(elm).text('Detail ' + (i + 1));
   });
});

$("body").on("click",".remove",function(){
   $(this).parents(".multiple_tour_wrap").remove();
});

Answer 1

我刚刚减少了代码量，所以您可以看到它的工作原理。

我在html中添加了类“来宾名称”输入字段，因此可以在jQuery中定位

<input class="guest_name" type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">

jQuery：

var count = 1; // Create a count

$("body").on("click",".multiple_add_button",function(){

   var html = $(".multiple_tour_wrap").first().clone(); 
       html.find('.guest_name').attr({ name: "mul_gname["+count+"]"});//use the count to update this clone field
       // you can update all the attributes here before the clone is added
       $(".multiple_tour_wrap").last().after(html);//add the clone
   
   count++; // increase the count

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple_tour_wrap">
   <div class="row">
      <div class="col-md-12">
         <div class="form-group">
            <h5 class="badge badge-details multiple_counting">Details 1</h5><hr><br/>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Guest Name</label>
            <input class="guest_name" type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">
         </div>
      </div>
   </div> <!--end trip_wrpapper -->
   <div class="row">
      <div class="col-md-12">
         <div class="form-group multiple_change text-right">
            <a class="btn multiple_add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
         </div>
      </div>
   </div>
</div> <!--end multiple_tour_wrap -->

使用jQuery克隆后如何更改名称属性？

1 个答案: