单击按钮时如何创建元素的副本
[英]How to create a copy of an element when a button is clicked
问题描述
I have been trying to learn to build websites, and I've come to an issue I cannot seem to find the answer to.
我一直在尝试学习构建网站，但遇到了一个我似乎无法找到答案的问题。 I would like #buttonNewNote to create a copy of #cloneBox when it is clicked, but I can't seem to figure out how.我希望 #buttonNewNote 在单击时创建 #cloneBox 的副本，但我似乎无法弄清楚如何。 Thank you!谢谢！
Code代码
<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 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;
}
What I have of the Jquery我对 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')
});
});
Thank you so much!非常感谢！
6 个解决方案
解决方案1
1 2017-08-11 07:46:48
$(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>
解决方案2
0 2017-08-11 07:46:40
Try this using clone()使用 clone() 试试这个
$('#buttonNewNote').click(function(){
var clone_box = $('body').find('.cloneBox:first');
clone_box.clone().appendTo( "body" );
});
解决方案3
0 2017-08-11 07:46:50
You need to use clone() to get the clone of the textarea and append it to your DOM.您需要使用clone()来获取textarea的克隆并将其附加到您的 DOM 中。 And ensure that textarea doesn't clone the values, so you need to reset it.并确保textarea不会克隆值，因此您需要重置它。 Below is updated code:下面是更新的代码：
$('#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>
解决方案4
0 2017-08-11 07:49:44
You can do like this:你可以这样做：
$(document).ready( function() {
$('#buttonNewNote').click(function(){
var div = $('.cloneBox').clone();
var textArea = div.find('#textarea1').RemoveAttr('id');
textArea.attr('id','textarea2');
$('.cloneBox').append(textArea;
});
});
and your html will be:你的 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>
解决方案5
0 2017-08-11 07:50:27
Changing as little as possible in your code for you to see what to do:尽可能少地更改您的代码，以便您了解要执行的操作：
$('#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);
});
But you should probably just take advantage of jQuery's clone function (note that you have to recall draggable):但是您可能应该只利用 jQuery 的clone功能（请注意，您必须回忆起draggable）：
$('#buttonNewNote').click(function() {
$('body').append($($('.cloneBox')[0]).clone());
$('.cloneBox').draggable();
});
解决方案6
0 2017-08-11 07:59:36
You are on the right track.你走在正确的轨道上。 For cloning elements though, I prefer to use the .clone() method, and then append that clone to the parent of the original element so that it occurs right after it in the HTML.不过，对于克隆元素，我更喜欢使用 .clone() 方法，然后将该克隆附加到原始元素的父元素，以便它在 HTML 中紧随其后。 I also added one more line to the bottom of the click function to reset the clone as also being draggable.我还在单击功能的底部添加了一行，以将克隆重置为也可拖动。
Don't forget to add both script tags so that you are using both jQuery and jQuery-UI.不要忘记添加两个脚本标签，以便您同时使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.