Jquery 动态添加或删除输入字段，因为它们'；重新要求

我有一个多文件输入的设置，通过隐藏输入、在html/css中创建自己的输入，然后通过jQuery控制原始输入来获得功能，我对这些输入进行了样式化

如果所有输入都已填充，我希望能够添加另一个输入和关联的HTML，如下所示：

• 从1个输入开始
• 如果已填充/使用，请添加另一个输入
• 重复
• 删除清除的输入，只留下一个空输入供使用

我试着用我的代码创建一个js文件，但它似乎无法通过，所以这里有一个链接指向我网站上的测试：

代码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:

很抱歉发了这么长的帖子！到目前为止，我不确定展示我作品的最佳方式。

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>

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

注:

• 每当填充现有输入字段（及其可见的对应字段）时，就会从“change”处理程序内部调用

  makeInputSet（）

• 这两个

  .data（）

  调用确保隐藏元素和可见元素能够相互通信，而无需字符串处理ID或形成效率相当低的闭包

---

一切都未经测试，因此可能需要调试

这工作得很好！非常感谢。唯一没有被选中的部分是它检查文件是否已经被选中：if（$visible.find（“.file info”）.text（）==val{alert（'You haven selected this'）；$（this.replacetwith（$（this.val（''）.clone（true））；}但是在我的脑海中读它似乎应该被选中？有什么想法吗？啊，是的，测试不正确。新的

val

需要对照每个现有

.file info

div的文本进行测试。如果你的原始方法有效，可能是最好的，但我刚刚用不同的东西编辑了我的答案；也就是说，使用

.map（）

在现有的

.file info

div中循环查找匹配项，然后测试生成的jQuery对象的长度。刚刚开始测试，它是

.filter（）

，而不是

.map（）

。只是又看了一眼，发现了另一个问题。目前，如果输入被“重新浏览”，并且成功选择了另一个文件，则将进行进一步的新输入，即使已经存在空白输入。我认为您的原始代码也会以同样的方式运行。只有填充空白输入时，才能调用<代码> AudioPosiStET（）/<代码>。见上面修订的代码。

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