我想达到和这里完全一样的结果：https://veeva-subject-lines.tomasino.org/
它使用的是vue.js，但我在寻找一个简单的jquery或javascript解决方案。以下是我目前所做的：
在keyup函数中，我创建了一个包含所有输入值的数组，用"|所有输入值都显示在"result" div中。然后，使用"add"或"remove"按钮，添加具有特定ID的新输入，或者删除添加的输入。
- 我想达到的目标**
这个"|"分隔符是用join（）函数添加的，当删除resultdiv中的一个input和关联的文本时，分隔符仍然存在，如何删除它？
下面是我的代码：
$('body').on('input', '.custom', function(event) {
var tokens='';
var i = 0;
var token = $('.custom').map(function() {
i++;
return '<span id="custom-'+ i +'">' + this.value + '</span>';
}).get().join('|');
tokens += token;
$('#token').html(tokens);
//remove related input value in the result div
$('.remove').click(function(){
$('#custom-'+ i +'').remove();
i--;
});
});
// I add a new input on add click, with a specific ID starting from 3 as there are already two harcoded input
var count = 3;
$('.add').click(function() {
var y = '<div class="flex-row"><label><input id="custom_text_' + (count++) + '" class="custom" type="text" name="" placeholder="custom text"></label><button class="remove">-</button>';
$(y).insertBefore('.add');
});
$('body').on('click','.remove', function(){
$(this).parent('.flex-row').remove();
})
});<body>
<div class="container">
<div class="wrapper">
<article>
<section>
<div class="flex-row">
<label for="custom_text_one"><input id="custom_text_1" class="custom" type="text" name="" placeholder="custom text"></label>
<button class="remove">-</button>
</div>
<div class="flex-row">
<label for="custom_text_two"><input id="custom_text_2" class="custom" type="text" name="" placeholder="custom text 2"></label>
<button class="remove">-</button>
</div>
<button class="add">+</button>
<div class="flex-row">
<div>customText{{[<span id="token"></span>]}}</div>
</div>
</section>
</article>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>- EDIT**：感谢Twisty我设法添加了删除功能，现在我还可以一起删除输入和输出。
$("#inputs").on('input', 'input[type=text]', function(event) {
var i = $(this).closest(".flex-row").index();
var v = (i == 0) ? $(this).val() : "|" + $(this).val();
$("#custom_wrapper .output").eq(i).html(v);
});
$('.add').click(function() {
var count = $("#inputs input").length;
count++;
var row = $("<div>", {
class: "flex-row"
}).insertBefore(this);
$("<label>").appendTo(row);
$("<input>", {
type: "text",
class: "input",
placeholder: "custom text " + count,
id:"custom-text-" +count,
tabindex: count
}).appendTo($("label", row));
$("<button>", {
class: "remove"
}).html("-").appendTo(row);
$("<span>", {
class: "output",
dataid:"custom-text-" +count,
}).insertAfter($("#custom_wrapper .output:last"));
});
$('body').on('click','.remove', function(){
$(this).parent('.flex-row').remove();
var j =$(this).parent().find('.input').attr("id");
$('#custom_wrapper .output[dataid="'+ j +'"').empty();
})
1条答案
按热度按时间wgx48brx1#
考虑使用
.html()而不是.append()。这会将来自
input的文本添加到字符串的特定部分，用管道字符（|）分隔output。每个input对应一个output。