我有一些代码可以对几个元素(输入字段)进行排序,并希望将排序顺序存储在数据库中。检查元素时,排序工作和ID会以正确的顺序显示,但是当我添加新的输入字段时,所有ID都会按照升序进行更新和排序,而不是我在添加新输入之前对它们进行排序的顺序。
示例:
我添加了三个字段,它们像这样:
1
2
3
我将3拖到第一位,所以我有:
3
1
2
但是随后我添加了一个新字段,顺序更改为:
1
2
3
4
代替
3
1
2
4
这是我目前的HTML:
<button id="addcategory" class="btn btn-success btn-lg waves-effect btnadd">Extra categorie</button>
<form id="lijstform">
<div class="row">
<div class="col-md-8">
<label class="lijstnaamtitle">Lijst naam</label>
<label class="displaynonecoid" id="coid"><?PHP echo $getbedrijfinfo['id']; ?></label>
<input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
</div>
</div>
<div id="dynamic_field">
<div class="row sortwrap" id="1">
<div class="col-md-8">
<input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput" />
<i class="mdi mdi-sort dragndrop"></i>
<div class="questionlist questionwrap">
<div class="row">
<div class="col-md-8">
<button class="btn btn-success questionbutton">Extra vraag</button>
<input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</form>
<div class="lijstresult">
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-success inspectiebutton lijstbutton">Opslaan</button>
</div>
</div>
这是我的jquery代码,用于对字段进行排序,添加新字段并更新ID:
// HTML template for new fields
const template =
'<div class="row sortwrap">'+
' <div class="col-md-8">'+
' <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />'+
' <i class="mdi mdi-sort dragndrop"></i>'+
' <div class="questionlist questionwrap">'+
' <div class="row">'+
' <div class="col-md-8">'+
' <button class="btn btn-success questionbutton">Extra vraag</button>'+
' <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />'+
' </div>'+
' <div class="col-md-4">'+
' </div>'+
' </div>'+
' </div>'+
' </div>'+
' <div class="col-md-4"> '+
' <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>'+
' </div> '+
'</div>';
const vraagTemplate =
'<div class="row" id="question">' +
' <div class="col-md-8">' +
' <input type="text" name="question[]" class="form-control name_list questioninput" />' +
' </div>' +
' <div class="col-md-4">' +
' <button class="btn btn-danger btn_remove">X</button>' +
' </div>' +
'</div>';
// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
$('#input-field-id').val($('#input-field-id').val() + 'more text');
// Sortable code
let df = $('#dynamic_field');
df.find('input[name^=cat]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});
df.find('.questionlist').each(function() {
$(this).find('input[name^=qu]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
});
});
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
let $ql = $(this).closest('.questionlist');
$ql.append($(vraagTemplate));
updatePlaceholders();
});
// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
$(this).closest('.row').remove();
updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
$('#dynamic_field').append(t);
updatePlaceholders();
});
$(function() {
$('#addcategory').trigger('click');
$('#question').sortable({
connectWith: '#question'
});
$('#dynamic_field').sortable({
cancel: '.questionwrap, input',
placeholder: "ui-state-highlight"
});
});
这是我正在谈论的ID:
df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});
答案 0 :(得分:1)
尝试设置id
和placeholder
(如果不存在)。
df.find('input[name^=cat]').each(function(i) {
if (!this.placeholder)
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
if (!this.id)
$(this).attr("id", i + 1 + "-order");
});