Jquery селектор для нескольких полей ввода с одинаковым именем - PullRequest
Новая
       16

Jquery селектор для нескольких полей ввода с одинаковым именем

0 голосов
/ 04 марта 2019

У меня есть форма, куда я загружаю три разных файла.Также у меня есть два поля ввода для всех загрузок файлов, где я храню некоторую информацию о загрузке файлов. 

<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" корректно заполняется селекторомчто у меня есть, но когда я делаю то же самое для поля «длительность», это не работает.Как я могу выбрать конкретное поле продолжительности?Любая помощь будет оценена

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

вы можете использовать .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");
0 голосов
/ 04 марта 2019

, поскольку у вас есть общий родительский контейнер для всей группы полей, вы можете настроить таргетинг на элемент относительно его родителя, как указано ниже, 

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 для вышеупомянутого

0 голосов
/ 04 марта 2019

Из вашего onchange="getFileData(this);" у вас есть ссылка на первый вход в div в качестве параметра myFile, и вы хотите выбрать брата, который соответствует селектору, так что вы можете использовать .siblings метод вызван на $(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);
...