更改多个输入的标签文本

Question

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

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

空：文字="upload"；
所选文件：文本 = 文件名。

这里是 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 遍历找到与已更改的 input 相关的 span。试试这个：

$('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

 $('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)
        } 
});

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

更改多个输入的标签文本

Change label text for multiple inputs

javascript

jquery

input

jquery-selectors