Question

我想在下面的代码中添加一些功能，只有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/

Answer 1

您只需在重复代码之前添加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);
    }
}

1. Example on JSFiddle.

如果您想要点击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;
    }
}

2. And an example on JSFiddle.

3. Finally the master solution with add and remove button. But just in a JSFiddle because the code is large...

4. I know it's already a lot but I improved all this, here is the JSFiddle with add and remove button, disable enable function, min max variable and without any i or count varaible, so it's the ultimate master solution ;)

Answer 2

您可以添加一个按钮来删除这样的元素：

<button id="button">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>
    <button class='removebutton'>Delete</button>
</div>

您可以启用一个函数，当它使用jquery点击时触发：

$('body').on('click', ".removebutton", remove);

最后，删除处理程序可以删除单击的元素：

function remove() {
if (count > 1) {
    if ($(this).parent().attr('id') != 'duplicater') {
        $(this).parent().remove();
        count--;
    } else {
        alert("You can't delete the first plan");
    }
} else {
    alert("You can't delete the first plan");
}
}

http://jsfiddle.net/JVzCt/

我对ReeCube使用的计数器采用了类似的方法。

因为它使用jquery，你需要从本地机器或其他地方包含它，例如

。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

所有js代码都应该包含在标准的jquery ready函数中：

$(function(){
    // Put your js code here.
});

点击计数器＆amp;添加Div's限制

2 个答案: