單擊按鈕時如何創建元素的副本
[英]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.