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" />

すべてにThx :)

編集:私のタグは、入力のようにフェードアウトしません。どうすればよいですか?

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 = 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 に答える
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 に答える