0

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

$("#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();
    }
4

4 回答 4

2

将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 小提琴演示。

但是，您可以避免使用全局变量（可能会在闭包中的其他地方更改），使用属性（在本例中为给定的类名）来跟踪有多少元素：

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

JS 小提琴演示。

于 2013-05-12T17:01:54.723 回答
0

在函数外部赋值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++;
});
于 2013-05-12T17:00:46.797 回答
0

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>
于 2013-05-12T17:01:31.773 回答
0 
var i = 1;
$("#add_file").click(function(e){
        $("#input_file").append('<input type="file" name="file[]" id="file"'+i+" />").append('<br />');
        i++;
});
于 2013-05-12T17:07:42.773 回答