ボタンがクリックされたときにdivを複製したい。私はこのようなものですが。しかし、それは機能していません。誰も私を助けることができますか?
HTML
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
</div>
ジャバスクリプト
function duplicate()
{
var div = duplicate("div");
div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}
無限の再帰を作成しています!
_function duplicate()
{
var div = duplicate("div");
_
関数は何度も何度も自分自身を呼び出しています。 cloneNode()
を使用します。
HTML:
_<div id="duplicater0">
duplicate EVERYTHING INSIDE THIS DIV
</div>
_
JavaScript:
_var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' + i);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i; // there can only be one element with an ID
clone.onclick = duplicate; // event handlers are not cloned
original.parentNode.appendChild(clone);
}
_
またはIDなし:
_function duplicate() {
var clone = this.cloneNode(true); // "deep" clone
clone.id = ""; // there can only be one element with an ID
clone.onclick = duplicate; // event handlers are not cloned
this.parentNode.appendChild(clone);
}
_
更新:
ボタンクリックでdivを複製する場合は、少し異なるバージョンを使用できます。
HTML:
_<button id="button" onclick="duplicate()">Click me</button>
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
</div>
_
JavaScript:
_var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
_
フォームにいない場合は、_<button>
_の代わりに_<input type="button">
_を使用する必要があります。
<table>
<tr>
<td>
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
</div>
</td>
</tr>
</table>
<button id="button">Click me</button>
$("#button").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
});
Divをクラスに変更できますか?もしそうなら、 this はあなたのために働くかもしれません:
# application.js
$(function(){
$('.photo:last').after('<a href="#" id="new_resource">Add another image<a/><br/>');
$('a[href=#]').click(function(){
$(this).before($('.photo:last').clone());
$('.photo:last input').each(function(){
$(this).removeAttr("value");
});
$('.photo:last input[type=hidden]').remove();
return false;
});
})
#html
<div class="photo"
<label>label</label>
<input type="file"></input>
</div>
コードを編集します here :