Question

我一直在努力学习构建网站，而且我遇到了一个似乎无法找到答案的问题。我想#buttonNewNote在点击时创建#cloneBox的副本，但我似乎无法弄清楚如何。谢谢！

代码

      <html>
<body>
  <div id='navbar'>
    <div id='siteTitle'>
      <h1> Notes.com </h1>
      <button id= 'buttonNewNote'> New Note </button>
    </div>
  </div>
  <div class='cloneBox'>
    <textarea rows="4" cols="50">Enter your notes Here! </textarea>
  </div>

</body>
</html>

CSS

 .cloneBox {
        top: 200px;
        left:50px;
        display: -webkit-flex;
        border: 5px;
        border-top: 20px;
        border-style: solid;
        border-color: yellow;
        width:260px;
    }

    #noteInput {
      position: relative;
      min-width: 50px;
      width: 200px;
      height: 100px;
      border: 5px;
      border-top: 20px;
      border-color:  #3296d2;
    }

我对Jquery的了解

$(document).ready( function() {
  $('.cloneBox').draggable();
  $('#buttonNewNote').click(function(){
    $(document.createElement('div'));
      $('div').html('<textarea rows="4" cols="50">Enter your notes Here! 
</textarea>')
      $('div').addClass('cloneBox')


  });
});

非常感谢你！

Answer 1

您可以使用clone

$(document).ready(function() {

  $('#buttonNewNote').click(function() {
    $(".cloneBox").clone().appendTo("#cloneArea")
  });
});

.cloneBox {
  top: 200px;
  left: 50px;
  display: -webkit-flex;
  border: 5px;
  border-top: 20px;
  border-style: solid;
  border-color: yellow;
  width: 260px;
}

#noteInput {
  position: relative;
  min-width: 50px;
  width: 200px;
  height: 100px;
  border: 5px;
  border-top: 20px;
  border-color: #3296d2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='navbar'>
  <div id='siteTitle'>
    <h1> Notes.com </h1>
    <button id='buttonNewNote'> New Note </button>
  </div>
</div>
<div class='cloneBox'>
  <textarea rows="4" cols="50">Enter your notes Here! </textarea>
</div>
<div id="cloneArea"></div>

Answer 2

使用clone（）

尝试此操作

  $('#buttonNewNote').click(function(){
   var clone_box = $('body').find('.cloneBox:first');
   clone_box.clone().appendTo( "body" );
   });

Answer 3

您需要使用clone()来获取textarea的克隆并将其附加到您的DOM。并确保textarea不克隆值，因此您需要重置它。以下是更新的代码：

$('#buttonNewNote').click(function() {
  var cloneObj = $(".cloneBox:first").clone();
  $(cloneObj).find('textarea').val('Enter your notes Here!');
  $('body').append(cloneObj);
});

.cloneBox {
  top: 200px;
  left: 50px;
  display: -webkit-flex;
  border: 5px;
  border-top: 20px;
  border-style: solid;
  border-color: yellow;
  width: 260px;
}

#noteInput {
  position: relative;
  min-width: 50px;
  width: 200px;
  height: 100px;
  border: 5px;
  border-top: 20px;
  border-color: #3296d2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div id='navbar'>
    <div id='siteTitle'>
      <h1> Notes.com </h1>
      <button id='buttonNewNote'> New Note </button>
    </div>
  </div>
  <div class='cloneBox'>
    <textarea rows="4" cols="50">Enter your notes Here! </textarea>
  </div>

</body>

</html>

Answer 4

你可以这样做：

$(document).ready( function() {
  $('#buttonNewNote').click(function(){
    var div = $('.cloneBox').clone();
    var textArea = div.find('#textarea1').RemoveAttr('id');
    textArea.attr('id','textarea2');
    $('.cloneBox').append(textArea;
  });
});

你的html将是：

    <html>
<body>
  <div id='navbar'>
    <div id='siteTitle'>
      <h1> Notes.com </h1>
      <button id= 'buttonNewNote'> New Note </button>
    </div>
  </div>
  <div class='cloneBox'>
    <textarea rows="4" cols="50" id="textarea1">Enter your notes Here! </textarea>
  </div>

</body>
</html>

Answer 5

在代码中尽可能少地更改，以便您查看要执行的操作：

$('#buttonNewNote').click(function() {
    var note = document.createElement('div');
    $(note).html('<textarea rows="4" cols="50">Enter your notes Here! </textarea>');
    $(note).addClass('cloneBox');
    $(note).draggable();
    $('body').append(note);
});

但是你应该利用jQuery的clone函数（注意你必须回忆起draggable）：

$('#buttonNewNote').click(function() {
    $('body').append($($('.cloneBox')[0]).clone());
    $('.cloneBox').draggable();
});

Answer 6

你走在正确的轨道上。但是对于克隆元素，我更喜欢使用.clone（）方法，然后将该克隆附加到原始元素的父元素，以便它在HTML之后立即发生。我还在点击功能的底部添加了一行，以便将克隆重置为可拖动。

不要忘记添加两个脚本标记，以便同时使用jQuery和jQuery-UI。

$(document).ready( function() {
  var copy = $('.cloneBox').clone();
  $('.cloneBox').draggable();
  $('#buttonNewNote').click(function(){
    $('.cloneBox:first').parent().append(copy.clone());
    $('.cloneBox').draggable();
  });
});

 .cloneBox {
        top: 200px;
        left:50px;
        display: -webkit-flex;
        border: 5px;
        border-top: 20px;
        border-style: solid;
        border-color: yellow;
        width:260px;
    }

    #noteInput {
      position: relative;
      min-width: 50px;
      width: 200px;
      height: 100px;
      border: 5px;
      border-top: 20px;
      border-color:  #3296d2;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='navbar'>
  <div id='siteTitle'>
    <h1> Notes.com </h1>
    <button id= 'buttonNewNote'> New Note </button>
  </div>
</div>
<div class='cloneBox'>
  <textarea rows="4" cols="50">Enter your notes Here! </textarea>
</div>

单击按钮时如何创建元素的副本

6 个答案: