我有一个带有克隆部分的订单页面刀片，该部分几乎可以正常工作，但是它为一组不希望的div添加了id和属性。 jQuery不是我的强项，因此我需要一些帮助以使其正确。
我需要复选框部分的名称属性（也包括隐藏的复选框）以具有递增的数组值，因此第一个产品div的日期为monday [0]，tuesday [0]，wednesday [0] ... 然后以下克隆的复选框分别为monday [1]，tuesday [1]，wednesday [1]
天数组
array:7 [▼
0 => "Monday"
1 => "Tuesday"
2 => "Wednesday"
3 => "Thursday"
4 => "Friday"
5 => "Saturday"
6 => "Sunday"
]
HTML
<div id="products" class="field">
<div id="product0" class="product m-b-20">
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-expanded">
<label class="label">Purchase</label>
<div class="select is-fullwidth">
{!! Form::select('purchase_id[]', $products, null, ['class' => 'input purchase_dropdown', 'id' => 'purchases']) !!}
</div>
</div>
<div class="field" id="mode_1">
<label class="label">Mode</label>
<div class="select is-fullwidth">
<select name="delivery_mode[]" class="delivery_mode">
<option value="0" selected="selected">Mode 1</option>
<option value="1">Mode 2</option>
<option value="2">Mode 3</option>
<option value="3">Mode 4</option>
<option value="4">Mode 5</option>
</select>
</div>
</div>
<div class="field is-expanded">
<label class="label">Cost</label>
<input class="input product_cost_text_field qty1" placeholder="Cost" type="number" step="0.01" name="cost[]"/>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="columns">
<div class="column">
<div class="field">
<div class="control">
<label class="label" for="is-gov-funded">Discount</label>
<div class="select is-fullwidth">
<select name="gov_funding[]" class="gov_funding" id="gov_funding">
<option value="" >-</option>
<option value="Discount 1">Discount 1</option>
<option value="Discount 2">Discount 2</option>
</select>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<div class="control">
<label class="label">Discount Amount</label>
<input class="input discount_amount" placeholder="Discount Amount" type="number" step="0.01" name="discount_amount[]">
</div>
</div>
</div>
<div class="column">
<div class="field">
<div class="control">
<label class="label has-text-white m-b-20">Discount Status</label>
<input class="is-checkradio is-info" type="checkbox" id="gov_funding_status_checkbox" name="discount_status[]" value="1">
<label class="label" for="discount_status_checkbox">Approved</label>
<input type="hidden" name="discount_status[]" id="discount_status_checkbox_hidden" value="0" class="is-checkradio">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" style="display:none;">
<div class="columns p-t-20">
<div class="column is-half">
<h3 class="subtitle is-info"><span class="icon p-b-10 m-r-10"><i class="fa fa-university"></i></span>Location Information</h3>
<div class="field is-horizontal">
<div class="field-label is-normal" id="location">
<label class="label">Campus</label>
</div>
<div class="field-body">
<div class="select is-fullwidth">
{!! Form::select('location[]', $locations, null, ['class' => 'input location_name_dropdown']) !!}
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal" id="start_date">
<label class="label">Start</label>
</div>
<div class="field-body">
<input class="input course_cost_text_field" type="date" name="start_date[]"/>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal" id="start_time">
<label for="start_time" class="label">Start Time</label>
</div>
<div class="field-body">
<input class="input" type="time" name="start_time[]">
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal" id="end_time">
<label for="end_time" class="label">End Time</label>
</div>
<div class="field-body">
<input class="input" type="time" name="end_time[]">
</div>
</div>
</div>
<div class="column is-half">
<div class="control m-b-30">
<label class="label" for="Deliver Days">Days</label>
@foreach($days as $day)
<div class="field days">
<input type="hidden" name='<?php echo $day; ?>[0]' id='hidden<?php echo $day; ?>_0' class="is-checkradio cloned_checkbox_hidden">
<input name="<?php echo $day; ?>[0]" id="<?php echo $day; ?>_0" value="1" type="checkbox" class="cloned_checkbox is-checkradio f_input is-link" />
<label for="<?php echo $day; ?>_0"><?php echo $day; ?></label>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="is-divider m-b-30 m-t-30" data-content=""></div>
</div>
</div>
<!-- ADD/REMOVE PRODUCT BUTTONS -->
<div class="field is-grouped">
<div id="remove-product" class="control">
<a id="rp" class="button is-danger"><span
class="icon is-small"><i class="fa fa-times"></i></span><span>Remove
Product</span></a>
</div>
<div id="add-product" class="control">
<a id="ap" class="add button is-primary" >
<span class="icon is-small"><i class="fa fa-plus"></i></span><span>Add
Product</span></a>
</div>
</div>
意大利面JQUERY clone.js
我不得不在星期一返回[0] [1] [1] [1] [1] [1]时在隐藏的复选框名称属性中添加子字符串部分，因此显然我做错了很多，但是确实可以，但是随处都添加了id，这是长期不可行的
$(document).ready(function(){
var template = $('#products .product:first').clone();
var productsCount = 0;
window.addProduct = function(){
productsCount++;
var product = template.clone().find(':input, div').each(function(){
var newId = this.id.substring(0, this.id.length-1) + productsCount;
$(this).next().attr('for', newId); // update label for
this.id = newId; // update id and name (assume the same)
$(this).find(".cloned_checkbox_hidden").attr("name", function() { return $(this).attr("name").substring(0, this.id.length-8) + "["+productsCount+"]" });
$(this).find(".cloned_checkbox").attr("name", function() { return $(this).attr("name").substring(0, this.id.length-2) + "["+productsCount+"]" });
}).end()
.attr('id', 'product' + productsCount)
.appendTo('#products');
}
$('.add').click(addProduct);
$("a#rp").click(function () {
if ($(".product").length != 1) {
$(".product:last").remove();
}
event.preventDefault();
});
});