0

ファイル入力と 2 つのテキスト ボックスを含むフォームがあります。複数のファイルをアップロードする必要がある場合は、3 つの入力すべてを複製できます。ユーザーがファイル入力の値をクリアできるようにするすべてのdivの最後にクリアボタンを追加しようとしています。しかし、私の人生では、それを機能させることはできません。

使用しようとして.last()いますが、div が複製されると、最後のファイル入力を選択していないようです。

私のコードは以下です。

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" />
    <input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" />
    <button class="clear_certificate">Clear</button>
</div>

$(function() {
    $('.clear_certificate').click(function(event) {
    event.preventDefault();
    $('input[type="file"].user_certificate').last().val('');

    });
});

入力のある div が 1 つしかない場合は、問題なくクリアされます。div が複製されると、前の div はクリアされなくなります。

何か案は？助けてくれてありがとう、どうもありがとう！

編集

私の問題でjsfiddleを作成しました。これが役立つことを願っています

4

3 に答える 3

1

HTML コード:

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_0" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_0" />
    <input type="text" name="expiry_date[]" class="expiry_date" id="expiry_date_0" placeholder="DD/MM/YYYY" />
    <button id="clear_certificate_0" class="clear_certificate">Clear</button>
</div>
<div id="certificates_new"></div>
<p><button type="button" id="add_certificate">Add another certificate</button></p>

JS:

var i = 1;

$('#add_certificate').click(function(){
    var sHtml = '<input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_'+i+'" />';
    sHtml +=    '<input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_'+i+'" />';
    sHtml +=    '<input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" id="expiry_date_'+i+'" />';
    sHtml +=    '<button class="clear_certificate" id="clear_certificate_'+i+'">Clear</button>';
    $('#certificates_new').append(sHtml);
    i++;
});

$(document).on("click", '.clear_certificate', function() {
    var arrID = $(this).attr("id").split("_");
    var ID = arrID[2];
    $('#user_certificate_'+ID).val('');
    $('#expiry_date_'+ID).val('');
    $('#certificate_name_'+ID).val('');
});

これで問題なく動作するはずです...コードを少し短くするためにコードを改善する必要がありますが、機能は提供されています。

于 2013-06-25T13:09:01.947 に答える
0

これは、あなたがやろうとしていることを達成するはずです:

$(".clear_certificate").click(function(){
   $(".certificates_list").children("input[type=file]:last-child").each(function(){
         // Do stuff here
   });
});

ラッパー div に id を指定してから $("#idOfDiv").children.... を実行するのが最善です。

于 2013-06-25T13:29:28.980 に答える
0

[type="file"] と書くと、type="file" とのみ一致し、HTML には 1 つのファイル入力しかありません

于 2013-06-25T13:05:37.717 に答える