Question

我想创建一个名为＆＃34;添加新附件＆＃34;的按钮。和5个附件字段集。每次单击此按钮时，都会显示一个附件字段集，如果再次单击此按钮，则会显示另外一个附件字段集，依此类推。

当点击按钮时，我的代码现在立即显示5个附件字段集！我怎样才能使这个动作有效？请伸出援助之手。 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

Answer 2

这是工作小提琴取下显示无

http://jsfiddle.net/8r1ahf9k/

$(document).ready(
    function()
    {
        var count = 5;
        $('#AddButtn').click(
            function()
            {
                count++;
                if (count > 10) {
                  alert('Sorry too many attachments');
                  return;
                }
                $('#mainAttach').append('<input id="attach' + count + '">Attach ' + count + '<br />');
            }
        );
    });

JQuery - 添加超过1个附件

2 个答案: