Question

我创建了一个克隆功能来克隆选择的元素。我设法让克隆功能的基础工作正常。 CLICK HERE 我有这个功能的错误。当用户在输入字段中键入文本时，它会克隆最后输入的文本并更改所有克隆项目的文本值。

$('.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();
  }
})

有谁知道如何解决这个问题？

Answer 1

在clone()之后清除输入值。您可以使用find()方法获取克隆项目中的所有输入。

var c = $('.list-items:first').clone();
c.find("input").val("");  // find all inputs and clear
c.appendTo("#items").addClass('isVisible');

Here是一个有效的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);

     }
  });

})

Here是完整解决方案的工作样本

jQuery clone（）输入值函数

1 个答案: