单击按钮时如何创建元素的副本
[英]How to create a copy of an element when a button is clicked
问题描述
我一直在尝试学习构建网站，但遇到了一个我似乎无法找到答案的问题。 我希望 #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')
});
});
非常感谢！
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
使用 clone() 试试这个
$('#buttonNewNote').click(function(){
var clone_box = $('body').find('.cloneBox:first');
clone_box.clone().appendTo( "body" );
});
解决方案3
0 2017-08-11 07:46:50
您需要使用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>
解决方案4
0 2017-08-11 07:49:44
你可以这样做：
$(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>
解决方案5
0 2017-08-11 07:50:27
尽可能少地更改您的代码，以便您了解要执行的操作：
$('#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();
});
解决方案6
0 2017-08-11 07:59:36
你走在正确的轨道上。 不过，对于克隆元素，我更喜欢使用 .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>
如何在单击第一个元素时创建按钮，它应该使用ng-show / ng-hide angularjs隐藏和显示第二个元素？
[英]how to create a button when the first element is clicked it should hide and show second element using ng-show/ng-hide angularjs?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.