Question

我有一个上载三个不同文件的表单。另外，对于所有文件上传，我都有两个输入字段，其中存储了有关文件上传的一些信息。

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>

<div>
  <input type="file"  class="file_name" name="file_name[]"onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]"/>
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]" />
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);"/>
  <input type="text" class="file_name_helper" name="file_name_helper" />
  <input type="text" class="duration" name="duration[]"/>
</div>

<script type="text/javascript">
function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).next("input[name='file_name_helper[]']").val(filename);
  $("input[name='duration[]']").val("duration");
}
</script>

问题在于，当我上载表单时，第一个字段“ file_name_helper”已正确地使用我拥有的选择器填充，但是当我对“ duration”字段执行相同操作时，它将不起作用。如何选择特定的持续时间字段？任何帮助将不胜感激

Answer 1

在onchange="getFileData(this);"中，您将div中的第一个输入作为myFile参数的引用，并且想要选择与选择器匹配的兄弟，因此可以使用{{ 3}}方法在$(myFile)上调用：

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).next("input[name='file_name_helper[]']").val(filename);
  $(myFile).siblings("input[name='duration[]']").val("duration");
}

请注意，如果您的HTML符合所描述的，则无需将选择器传递给.next，因为.next将默认选择紧邻的下一个元素：

$(myFile).next().val(filename);

Answer 2

您可以使用.nextAll()选择持续时间元素

$(myFile).nextAll("input[name='duration[]']").val("duration");

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).next("input[name='file_name_helper[]']").val(filename);
  $(myFile).nextAll("input[name='duration[]']").val('duration');
}

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<div>
  <input type="file"  class="file_name" name="file_name[]"onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]"/>
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]" />
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);"/>
  <input type="text" class="file_name_helper" name="file_name_helper" />
  <input type="text" class="duration" name="duration[]"/>
</div>

或者如果您确定标记与现在相同，则可以使用.next().next()来获取工期元素。

$(myFile).next().next().val("duration");

Answer 3

由于所有字段组都有一个公共的父容器，因此可以相对于其父元素定位元素，如下所示，

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).parent().find("input[name='file_name_helper[]']").val(filename);
  $(myFile).parent().find("input[name='duration[]']").val("duration");
}

Fiddle for the above

jQuery选择器用于具有相同名称的多个输入字段

3 个答案: