Javascript jQuery clone()输入值函数
我创建了一个克隆函数来克隆选定的元素。我已经设法使克隆功能的基础工作。 我在这个函数中有一个bug。当用户在输入字段中键入文本时,它将克隆最后输入的文本并更改所有克隆项的文本值Javascript jQuery clone()输入值函数,javascript,jquery,Javascript,Jquery,我创建了一个克隆函数来克隆选定的元素。我已经设法使克隆功能的基础工作。 我在这个函数中有一个bug。当用户在输入字段中键入文本时,它将克隆最后输入的文本并更改所有克隆项的文本值 $('.add-item').on('click', function() { var value = $('input').val(); if ($('#items-field').val()) { $('.list-items p').text(value) $('.list-items:fi
$('.add-item').on('click', function() {
var value = $('input').val();
if ($('#items-field').val()) {
$('.list-items p').text(value)
$('.list-items:first').clone().appendTo("#items").addClass('isVisible');
$('input').val('');
event.preventDefault();
}
})
有人知道如何解决此问题吗?在克隆()后清除输入值。您可以使用
find()
方法获取克隆项内的所有输入
var c = $('.list-items:first').clone();
c.find("input").val(""); // find all inputs and clear
c.appendTo("#items").addClass('isVisible');
是一个工作的jsbin示例
此外,在代码中,您正在读取输入值并将其设置为所有p
标记的文本。您应该只将其设置为克隆div的p标记
$(function(){
$('.add-item').on('click', function(e) {
event.preventDefault();
var value = $('#items-field').val();
if (value!="") {
var c = $('.list-items:first').clone();
c.find("input").val(""); // find all inputs and clear
c.appendTo("#items").addClass('isVisible');
c.find("p").text(value);
}
});
})
是完整解决方案的工作示例不确定是否按照我在问题中描述的方式工作,根据您的示例,它会克隆项目,但如果要在文本字段中键入名称,则按clone不会克隆单个名称。例如,尝试以下方法。在文本字段中键入tom>按clone steve>按clone etc查看我的更新答案。它也有一个工作样本。