jquery - 必要に応じて入力フィールドを動的に追加または削除する

Question

入力を非表示にし、html/css で独自のファイルを作成し、jQuery を介して元の入力を制御して機能を取得することでスタイルを設定した、複数のファイル入力のセットアップがあります。

次のように、すべての入力が満たされている場合は、別の入力と関連する HTML を追加できるようにしたいと考えています。

1入力から始める
これが満たされた/使用された場合は、別の入力を追加します
繰り返す
クリアされた入力を削除し、使用する空の入力を 1 つだけ残します。

コードでjsフィドルを作成しようとしましたが、うまくいかないようです。私のサイトのテストへのリンクは次のとおりです: LINK

コード、JS:

$('.file-browse').click(function(){
    var thisone = $(this).attr('id');
    $('input[name="input-'+ thisone+'"]').click();
});

$('input[type="file"]').on('change', function(){
    var thetext = $(this).val();
    var thetextsplit = thetext.split('\\').pop();
    var thisone = $(this).attr('name').split('-').pop();
    if($('div[id^="info-file"]').text() == thetextsplit){
        alert('you have already selected this file');
        $(this).replaceWith( $(this).val('').clone( true ) );
    }
    else{
        $('#info-'+ thisone).text(thetextsplit);
        $('#clear-'+ thisone).fadeIn(100);
    }
});

$('.file-clear').click(function(){
    var thisone = $(this).attr('id').split('-').pop();
    $('input[name="input'+ thisone +'"]').replaceWith( $('input[name="input'+ thisone +'"]').val('').clone( true ) );
    $('#info-'+ thisone).text('');
    $(this).fadeOut(100);
});

HTML:

    <div class="file-container">
      <div class="file-info" id="info-file1"></div>
      <div class="file-browse" id="file1">Browse</div>
      <div class="file-clear" id="clear-file1">X</div>
    </div>

    <div class="file-container">
      <div class="file-info" id="info-file2"></div>
      <div class="file-browse" id="file2">Browse</div>
      <div class="file-clear" id="clear-file2">X</div>
    </div>


    <div class="file-container">
      <div class="file-info" id="info-file3"></div>
      <div class="file-browse" id="file3">Browse</div>
      <div class="file-clear" id="clear-file3">X</div>
    </div>

    <form action="" method="POST" enctype="multipart/form-data">
  <input type='file' name="input-file1" class="file-input-hidden" />
      <input type='file' name="input-file2" class="file-input-hidden" />
      <input type='file' name="input-file3" class="file-input-hidden" />   
  <input type="submit" style="clear:both; float:left;"/>
    </form>

CSS:

.file-container{
clear:both;
float:left;
width:445px;
height:40px;
overflow:hidden;
padding:0;
margin:0;
}

.file-info{
float:left;
width:250px;
height:15px;
padding:5px;
border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #95d2d2;
margin:0 20px 0 0;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#373737;
overflow:hidden;
}

.file-browse{
float:left;
width:100px;
height:15px;
padding:3px 5px 8px 5px;
border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #95d2d2;
background-color:#02b3b3;
color:#ffffff;
font-family:Arial, Gadget, sans-serif;
font-size:16px;
font-weight:bold;
letter-spacing:normal;
text-align:center;  
cursor:pointer;
}

.file-input-hidden{
opacity:0;
visibility:hidden;
float:left;
}

.file-clear{
display:none;
float: left;
width: 18px;
height: 18px;
padding: 5px;
color: #ffffff;
background-color: #CC0000;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
margin-left: 20px;
text-align: center;
border-radius: 5px;
cursor:pointer;
}

長文すみません！これまでのところ、自分の作品を見せる最善の方法がわかりませんでした。

score 1 · Accepted Answer

Rpsep、

テンプレートから始めると、物事はより簡単になると思います：

<div id="input_template" style="display:none;">
    <div class="file-container">
        <div class="file-info"></div>
        <div class="file-browse">Browse</div>
        <div class="file-clear">X</div>
    </div>
    <input type='file' name="input-file[]" class="file-input-hidden" />
</div>

ノート：

外側のコンテナだけが ID を持っています。他のすべてにはクラスがあります。
入力要素が他のすべてのものと同じコンテナにあることを心配する必要はありません。複製後、適切な場所に配置されます。

次に、テンプレートに機能を追加します。

$("#input_template").find('.file-browse').on('click', function() {
    $(this).closest(".file-container").data('hidden').click();
});

$("#input_template").find('.file-clear').on('click', function(){
    $container = $(this).closest(".file-container");
    $container.data('hidden').remove();
    $container.remove();
});

$('#input_template').find(".file-input-hidden").on('change', function(){
    var val = $(this).val().split('\\').pop();
    var $visible = $(this).data('visible');
    var $matches = $(".file-info").filter(function() {
        return $(this).text() === val;
    });
    if($matches.length > 0) {
        alert('You have already selected this file');
        var $clone = $this.val('').clone(true);
        $visible.data('hidden', $clone);
        $this.replaceWith( $clone );
    }
    else{
/*
        $visible.find(".file-info").text(val);
        $visible.find(".file-clear").fadeIn(100);
        makeInputSet();
*/
        var $fi = $visible.find(".file-info");
        if(!$fi.text()) 
            makeInputSet();
        $fi.text(val).end().find(".file-clear").fadeIn(100);
    }
});

イベント処理をコンテナに委譲した方が良いのかもしれませんが、質問のコードに基づいて、このコードはより簡単に記述できました。

次の関数を使用してテンプレートを呼び出し、すぐに呼び出して最初のインスタンスを作成します。

function makeInputSet() {
    var $visible = $("#input_set").find(".file-container").clone(true, true).appendTo("#...");//appropriate selector required
    var $hidden = $("#input_set").find(".file-input-hidden").clone(true, true).appendTo("#...");//appropriate selector required
    $visible.data('hidden', $hidden);
    $hidden.data('visible', $visible);
}

makeInputSet();

ノート：

makeInputSet()次に、既存の入力フィールド (およびそれに対応する表示フィールド) が入力されるたびに、'change' ハンドラー内から呼び出されます。
2 つの.data()呼び出しにより、非表示の要素と表示される要素が、ID を文字列で処理したり、かなり非効率的なクロージャーを形成したりすることなく、相互に通信する手段を持つことが保証されます。

すべてがテストされていないため、おそらくデバッグが必要です

jquery - 必要に応じて入力フィールドを動的に追加または削除する

1 に答える 1

Related

Reference