使用JQuery动态输入命令输出值

Question

我有一个动态输入字段，它将把输入的文本显示给预览元素，但是当我以随机顺序输入时，预览文本的顺序也是随机的。

例如，我有3个输入字段，填充顺序从第一个字段开始，然后是第三个字段，然后是第二个字段。但是预览的结果是第1、3和2个字段。

[test 1][test 2][test 3]test 1 test 3 test 2

我想要的是即使填充的顺序是随机的，但在预览的结果仍然匹配字段的顺序。

[test 1][test 2][test 3]

这是HTML文件

<div class="row">
<div class="col-6">
<div class="form-group row description-form-group">
<label class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<div class="input-group mb-2">
<textarea class="form-control description" data-row="1"></textarea>
<span class="badge badge-primary">90</span>
</div>
<button type="button" class="btn btn-primary btn-sm btn-block mt-2 add-description">Add More Description +</button>
</div>
</div>
</div>
<div class="col-6">
<div class="description">
<span class="description-1">Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>

这是JQuery

var row = 1;  
$('.add-description').on('click', function() {
$('<div class="input-group mb-2">' +
'<textarea class="form-control description" data-row="' + (row + 1) + '"></textarea>' +
'<span class="badge badge-primary">90</span>' +
'</div>').insertBefore(this);
row++;
})
$('.description-form-group').on('keyup', 'textarea.description', function() {
var val = $(this).val();
var row = $(this).attr('data-row');
var length = val.length;
var count = 90;
var total_length = count - length;
$(this).next().text(total_length);
if (total_length <= 0) {
$(this).next().removeClass('badge-primary');
$(this).next().addClass('badge-danger');
} else {
$(this).next().addClass('badge-primary');
$(this).next().removeClass('badge-danger');
}
if (val && row > 1) {
$('.description > .description-' + row).remove();
$('.description').append('<span class="description-' + row + '">' + val + '</span>');
} else {
$('.description-' + row).text(val);
}
})

小提琴在这里

如有任何建议，不胜感激。

Answer 1

考虑以下内容:

$(function() {
var rows = [""];
function showRows(arr) {
$("div.description").html("");
$.each(arr, function(key, val) {
var row = $("<span>", {
class: "description-" + key
}).html(val).appendTo($(".description"));
});
}
$('.add-description').on('click', function() {
var row = $("textarea.description").length;
var group = $("<div>", {
class: "input-group mb-2"
}).insertBefore(this);
$("<textarea>", {
class: "form-control description",
"data-row": row
}).appendTo(group);
$("<span>", {
class: "badge badge-primary"
}).html("90").appendTo(group);
});
$('.description-form-group').on('keyup', 'textarea.description', function() {
var val = $(this).val();
var row = $(this).data("row");
var length = val.length;
var total_length = 90 - length;
$(this).next().text(total_length);
if (total_length <= 0) {
$(this).next().removeClass('badge-primary');
$(this).next().addClass('badge-danger');
} else {
$(this).next().addClass('badge-primary');
$(this).next().removeClass('badge-danger');
}
rows[row] = val;
showRows(rows);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-6">
<div class="form-group row description-form-group">
<label class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<div class="input-group mb-2">
<textarea class="form-control description" data-row="0"></textarea>
<span class="badge badge-primary">90</span>
</div>
<button type="button" class="btn btn-primary btn-sm btn-block mt-2 add-description">Add More Description +</button>
</div>
</div>
</div>
<div class="col-6">
<div class="description"></div>
</div>
</div>

使用Array来存储每个Textarea的值。当发生更改时，它会更新数组的适当部分并重新绘制所有细节。

Answer 2

在dictionary(object)中维护结果，它将帮助您对数据做任何您想做的事情。

我修改了一些代码来在object中添加数据。

<div class="row">
<div class="col-6">
<div class="form-group row description-form-group">
<label class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<div class="input-group mb-2">
<textarea class="form-control description" data-row="1"></textarea>
<span class="badge badge-primary">90</span>
</div>
<button type="button" class="btn btn-primary btn-sm btn-block mt-2 add-description">Add More Description +</button>
</div>
</div>
</div>
<div class="col-6">
Lorem ipsum dolor sit amet
<div class="result">

</div>
</div>
</div>

var row = 1;
var data = {"1": ""}; // it will keep entered data with keys as indexes
$('.add-description').on('click', function() {
$('<div class="input-group mb-2">' +
'<textarea class="form-control description" data-row="' + (row + 1) + '"></textarea>' +
'<span class="badge badge-primary">90</span>' +
'</div>').insertBefore(this);
row++;
data[row] = ""; // enter new key in dictionary with value as empty string
})
$('.description-form-group').on('keyup', 'textarea.description', function() {
var val = $(this).val();
var row = $(this).attr('data-row');
var length = val.length;
var count = 90;
var total_length = count - length;
data[row] = val; // update the value at index(whatever the textarea is)
$(this).next().text(total_length);
if (total_length <= 0) {
$(this).next().removeClass('badge-primary');
$(this).next().addClass('badge-danger');
} else {
$(this).next().addClass('badge-primary');
$(this).next().removeClass('badge-danger');
}
showResult(data);
})
// display result
function showResult(data) {
let str = '';
for(let key in data) {
str += data[key];
}
$('.result').text(str);
}

字典将维护以索引为键的数据

{
"1", "test1",
"2", "",
"3", "dfdf",
}

所以在将来如果你需要添加删除textarea的功能，你可以删除索引上的数据。也可以通过array.