javascript - 如何添加输入并给它们一个不同的 id？

Question

我有一个事件点击，每次单击链接时都会创建一个输入字段。

$("#add_file").click(function(e)
{
        var i = 0;

        $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />");
        $("#input_file").append('<br />');
        i++;
});
<a href="javascript:void(0)" id="add_file">Add file</a>

这里没问题..事实上，我想在每次创建输入标签时添加不同的 ID。像这样 :您点击:<input type="file" name="file[]" id="file1" />

再次:<input type="file" name="file[]" id="file2" />

谢谢大家:)

编辑:我的标签不像输入那样淡出，我该怎么办？

var i = 1;

    $("#add_file").click(function(e)
    {
        $("#input_file").append('<input type="file" name="file[]" id="file'+i+'" />');
        $("#input_file").append('<br />');
        $("#input_file").append('<input type="text" name="filename[]" id="file'+i+'" placeholder="Nom du fichier" />');
        $("#input_file").append('<a href="javascript:void(0)" onclick="removeFile(file'+i+');" id="file'+i+'">x</a>');
        $("#input_file").append('<br />');
        i++;
    });

    function removeFile(name)
    {
        $(name).fadeOut();
    }

Answer 1

将 i 声明移到函数外部，否则始终会重新声明它，并且始终设置为 0，并且在函数内将变量增加 1 :

var i = 0;
$('#add_file').click(function(){
    var fileInput = $('<input />', {
        'type' : 'file',
        'id' : 'file' + i,
        'name' : 'file[]'
    }).appendTo('#input_file');
    i++;
});

JS Fiddle demo .

不过，您可以避免使用全局变量(这些变量可能会在闭包内的其他位置发生更改)，而使用属性(在本例中为给定的类名)来跟踪有多少元素:

$('#add_file').click(function (e) {
    e.preventDefault();
    $('<input />', {
        'type': 'file',
            'id': 'file' + $('.fileInput').length,
            'name': 'file[]',
            'class': 'fileInput'
    }).appendTo('#input_file');
});

JS Fiddle demo .