Question

我的页面上有多个输入字段，并且想要更新所选特定输入字段的标签文本。我想显示已上传的文件名

我已经提出了这个但是它改变了输入字段的第一个实例的标签，无论我选择哪一个

＆＃13;

$('.document_file_field').on('change', function() {
  var input_field = $(this)
  var fileName = input_field[0].files[0]['name']
  $(this).prev('.custom-file-upload').text(fileName);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
  <label class="custom-file-upload btn btn-info" for="document_media">
    <span class="glyphicon glyphicon-cloud-upload"></span>
    Upload Document
  </label>
  <input class="document_file_field" type="file" name="document[media]" id="document_media" />
  <input type="submit" name="commit" value="Upload" class="btn btn-success" />
</form>
<form>
  <label class="custom-file-upload btn btn-info" for="document_other">
    <span class="glyphicon glyphicon-cloud-upload"></span>
    Upload Document
  </label>
  <input class="document_file_field" type="file" name="document[media]" id="document_other" />
  <input type="submit" name="commit" value="Upload" class="btn btn-success" />
</form>

＆＃13;

我如何才能完成这项工作，以便我只处理input_field及其标签

由于

Answer 1

一种快捷方法是根据for属性使用选择器：

var $input = $(this), id = $input.attr("id");
$input.prev('label[for="' + id + '"]').text(fileName);

这假设每个标签引用唯一的Id输入

Answer 2

http://jsfiddle.net/naeemshaikh27/7gLnya31/

首先确保你有独特的ID。然后，您可以搜索带有for属性的label元素，该属性的值与更改的文件输入的id相同。

$('.document_file_field').on('change', function(){
  var input_field = $(this)
  var inputId=input_field.attr('id')
  var fileName = input_field[0].files[0]['name'];
    $('label[for='+inputId+']').text(fileName);

});

仅处理$（this）元素

2 个答案: