Question

我有一个动态页面，可以有很多input[type="file"]个字段。一旦选择了文件，我需要更改每个输入的标签。

因此，对于每个输入，如果：

空：text =“upload”;
选择的文件：text =文件名。

以下是HTML示例：

<label for="upload-qm1">
    <span class="button">upload</span>
    <input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>

我知道如何使用此代码为单个input执行此操作：

$('label[for="upload-qm1"] span').text($(this).val());

但是，我不知道我的页面上会有多少input个字段。我试过这样的事情：

$(this).parent('label').find('span').text($(this).val());

但遗憾的是它不起作用。有关如何获取更改所有input字段的方法的任何帮助吗？

Answer 1

您可以使用DOM遍历来查找与已更改的span相关的input。试试这个：

$('input:file').change(function() {
    $(this).prev('span').text($(this).val());
})

Working example

Answer 2

您尝试的大部分代码都是正确的。问题是您已为parent()函数设置了一个参数。

尝试这样的事情： $(this).parent('label').find('span').text($(this).val());

还要确保$(this)是输入字段而不是标签本身，如果您点击标签$(this)是标签。

Answer 3

＆＃13;

 $('input[type="file"]').on('change', function() {
        id = $(this).attr('id');
           console.log("change event")
        var file = $('#'+id).val().split('\\').pop(); 
        if(file!='')  { 
             $('label[for="'+id+'"] span').text(file)
        } 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload-qm1">
  <span class="button">upload</span>
  <input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>

＆＃13;

更改多个输入的标签文本

3 个答案: