时间戳

首页 > 解决方案 > 用于具有相同名称的多个输入字段的 Jquery 选择器

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

问题描述

我有一个表格，可以在其中上传三个不同的文件。我还有两个用于所有文件上传的输入字段，我在其中存储了一些关于文件上传的信息。

<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”字段执行相同操作时，它不起作用。如何选择特定的持续时间字段？任何帮助，将不胜感激

标签： javascriptjqueryselector

解决方案

从您onchange="getFileData(this);"的 div 中，您可以引用 div 中的第一个输入作为myFile参数，并且您想要选择与选择器匹配的兄弟，因此您可以使用.siblings调用 on 的方法$(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);

推荐阅读