JQuery - 添加超过 1 个附件

Question

我想创建一个名为“添加新附件”的按钮和 5 个附件字段集。每次单击此按钮时，都会出现一个附件字段集，如果我再次单击此按钮，则会出现另一个附件字段集，依此类推。

单击按钮时，我的代码现在立即显示 5 个附件字段集!我怎样才能让这个 Action 起作用？请伸出援手。 Live Code 非常感谢!

HTML

<button type="button" id="AddButtn">Add New Attach</button>
<p>
<div id="mainAttach" class="uploadCover">
    <input id="attach1">Attach 1</input><br />
    <input id="attach2">Attach 2</input><br />
    <input id="attach3">Attach 3</input><br />
    <input id="attach4">Attach 4</input><br />
    <input id="attach5">Attach 5</input>
</div>
</p>

JS

$(document).ready(
    function()
    {
        $('#AddButtn').click(
            function()
            {
                $('#mainAttach').removeClass('uploadCover');
            }
        );
    });

CSS

.uploadCover{
    display:none;
}

Answer 1

您可以隐藏输入，然后像这样递增索引:

$(document).ready(function () {
    $('input').hide();
    var index = 0;
    $('#AddButtn').click(function () {
        index += 1;
        $('#mainAttach').removeClass('uploadCover');
        $('#attach' + index).show();
    });
});

Working demo click here