jQuery Selector将值设置为同名的特定文本输入字段

问题描述 投票：3回答：3

我有三个具有相同名称的文本输入字段和三个获取文件名的文本字段。我想获得三个文件名

function getFileData(myFile){
  var file = myFile.files[0];
  var filename  =  [file.name];

  $("input:text").val(filename);
}
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

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

上面的代码将所有字段设置为文件名。我想只设置与文件输入字段匹配的字段。

是否有一个jQuery选择器来做到这一点？

javascript jquery selector
3个回答
2
投票

正如您的HTML所示，您可以使用.next()：

$(myFile).next('input[type=text]').val(filename);

请注意：id属性在文档中必须是唯一的。如果要引用具有相同属性的多个元素，请改用class。

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];

  $(myFile).next('input[type=text]').val(filename);
}
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<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="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" class="file_name_helper" name="file_name_helper[]" />

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

    function getFileData(myFile){
           var file = myFile.files[0];
           var filename  =  [file.name];

           $(myFile).next().val(filename);
         }
    <!DOCTYPE html>
    <html>
    <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
    </script>
    <meta charset=utf-8 />
    </head>
    <body>
      <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
      <input type="text" id="file_name_helper" name="file_name_helper[]"/>

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

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




    </body>
    </html>
1
投票

在单击的输入上使用jquery的下一个函数找到下一个输入元素并填充文本输入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<meta charset=utf-8 />
</head>
<body>
  <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" id="file_name_helper" name="file_name_helper[]"/>

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

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


<script>
   function getFileData(myFile){
   var file = myFile.files[0];
   var filename  =  [file.name];

   $(myFile).next('input').val(filename);
   }
</script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.