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

Answer 2

在函数外部分配var i=0，否则它始终为0

var i = 0;
$("#add_file").click(function(e)
{
    $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" /><br />");
    i++;
});

Answer 3

i应该是外部点击功能。

var i = 1;
$("#add_file").click(function(e)
{         
    $("#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>

Answer 4

var i = 1;
$("#add_file").click(function(e){
        $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />").append('<br />');
        i++;
});

如何添加输入并为其提供不同的ID？

4 个答案: