我正在使用jquery.repeater字段,并希望在重复的字段顶部添加一个标签。
请参阅下面我的最小可行示例:
$(document).ready(function() {
'use strict';
$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
'text-input': 'bar',
'select-input': 'B',
'checkbox-input': ['A', 'B'],
'radio-input': 'B'
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
}
});
window.outerRepeater = $('.outer-repeater').repeater({
isFirstItemUndeletable: true,
defaultValues: {
'text-input': 'outer-default'
},
show: function() {
console.log('outer show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
isFirstItemUndeletable: true,
selector: '.inner-repeater',
defaultValues: {
'inner-text-input': 'inner-default'
},
show: function() {
console.log('inner show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<label>Product Name</label>
<label>Price</label>
<label>Date</label>
<label>Description</label>
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A" />
<input type="text" name="text-input" value="A" />
<input type="date" name="date-input" />
<textarea name="textarea-input">A</textarea>
</div>
<input data-repeater-create type="button" value="Add" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
我希望我的最终结果如下所示:
如您所见,标签直接位于重复字段上方。
有什么建议我做错了吗?
感谢您的回复!