我想用下面的代码添加一些功能,一个人只能点击添加按钮 5 次。
我还想为每个复制添加一个删除按钮,这样当点击时,div 被删除并且 5 次的计数器减少。
HTML:
<button id="button" onlick="duplicate()">Add another plan</button>
<div id="duplicater">
<p>Choose Your Mobile Plan</p>
<select>
<option value="1">Package 1</option>
<option value="2">Package 2</option>
<option value="3">Package 3</option>
<option value="4">Package 4</option>
<option value="5">Package 5</option>
<option value="6">Package 6</option>
</select>
</div>
JS:
document.getElementById('button').onclick = duplicate;
var i = 0; var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone); }
可以在这里找到 JSFiddle:http://jsfiddle.net/7x4re/
最佳答案
您只需在重复代码前添加一个if:
document.getElementById('button').onclick = duplicate;
var original = document.getElementById('duplicater');
var i = 1;
function duplicate() {
if (i < 6) {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + i++; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
}
如果你想在点击5次时禁用按钮,下面是代码:
document.getElementById('button').onclick = duplicate;
var original = document.getElementById('duplicater');
var i = 1;
var max = 5;
function duplicate() {
if (i < max + 1) {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + i++; // there can only be one element with an ID
original.parentNode.appendChild(clone);
if (i > max) document.getElementById('button').disabled = true;
}
}
关于javascript - 添加 Div's on Click with counter & limit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22456099/