javascript - 使用克隆元素将文件名传递给输入文本

Question

我需要传递我在 Input type=file 中选择的文件名和克隆元素

这里是预览图：

不，“克隆”功能已经可以使用，但正如我所说，我坚持从输入类型文件传递文件名

文件名应存储在输入 nonroutine_expenses_file_name 中（输入按钮的左侧）

我已经完成了，但是在我从文件选择器中单击文件后，它只传递到第一行，我的代码有什么问题吗？

我的错误：

这是我当前的代码：

$(document).ready(function() {
  $('.nonroutine_expenses_file_button').each(function() {
    var var_this = $(this);
    $(this).on('click', function() {
      var_this.prev().click();
    });
  })

  $('.nonroutine_expenses_file').each(function() {
    var var_this = $(this);
    $(this).on('change', function() {
      if ($(this).val()) {
        var var_filename = $(this).val().split('\\').pop();
        var_this.parent().parent().find('.nonroutine_expenses_file_name').val(var_filename);
      }
    });
  })

  var count = 1;
  $('#addMoreNonroutineExpenses').on('click', function() {
    console.log("count = " + count);

    var lastRow = $("#NonroutineExpenses-table tr").last().find(".sortNonroutineExpenses").val();
    console.log("lastRow = " + lastRow);
    if (lastRow == null) {
      lastRow = 0;
    }
    lastRow++;
    var table = $("#NonroutineExpenses-table");
    var original = $("#NonroutineExpenses-table tr:eq(1)");
    var clone = original.clone(true).appendTo("#NonroutineExpenses-table");
    newRow = clone.attr('class', 'clone');
    newRow.find("input").val("");
    newRow.find(".sortNonroutineExpenses").val(lastRow);
    count++;
  });

  $('#deleteNonroutineExpenses').on('click', function() {
    if (count > 1) {
      $(this).closest("tr").remove();
      count--;
      console.log("count = " + count);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive mt-4">
  <table class="table table-borderless" style="font-size: 13px;" id="NonroutineExpenses-table">
    <thead>
      <tr>
        <th class="align-middle text-left px-3 border-0" width="">Pengeluaran</th>
        <th class="align-middle text-left px-3" width="">Rincian Pengeluaran</th>
        <th class="align-middle text-left px-3" width="">Total Pengeluaran</th>
        <th class="align-middle text-left px-3" width="">Bukti Bayar</th>
        <th class="align-middle text-left px-3" width=""></th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-secondary">
        <td class="align-middle text-left border-0 py-2 d-none">
          <input type="number" name="sortNonroutineExpenses[]" value="1" class="sortNonroutineExpenses border-0 text-center shadow-none font-weight-bold w-100" min="1" max="10" style="background-color: transparent;" readonly="">
        </td>
        <td class="align-middle text-left py-2">
          <input type="text" name="nonroutine_expenses[]" value="" class="employee_loan_amount drml-bg-lightgray border-0 p-2 drml-border-radius-4 w-100" placeholder="Jenis Pengeluaran">
        </td>
        <td class="align-middle text-left py-2">
          <input type="text" name="nonroutine_expenses_detail[]" value="" class="employee_loan_amount drml-bg-lightgray border-0 p-2 drml-border-radius-4 w-100" placeholder="Detail Pengeluaran">
        </td>
        <td class="align-middle text-left py-2">
          <input type="number" name="nonroutine_expenses_cost[]" value="" class="employee_loan_amount drml-bg-lightgray border-0 p-2 drml-border-radius-4 w-100" placeholder="0">
        </td>
        <td class="align-middle text-left py-0">
          <div class="drml-bg-lightgray drml-border-radius-4 px-2">
            <div class="row">
              <div class="col-10">
                <input type="text" name="nonroutine_expenses_file_name[]" id="" class="bg-transparent mt-2 shadow-none border-0 outline-none nonroutine_expenses_file_name" style="width: 85px;" placeholder="Bukti Bayar" readonly>
              </div>
              <div class="col-2 d-flex">
                <input type="file" name="nonroutine_expenses_file[]" id="" class="nonroutine_expenses_file d-none">
                <a href="javascript:void(0)" class="drml-btn-primary-xs drml-border-radius-4 nonroutine_expenses_file_button"><i class="drml-icon-upload-white"></i></a>
              </div>
            </div>
          </div>
        </td>
        <td class="align-middle text-right py-2">
          <a id="deleteNonroutineExpenses" class="btn btn-link text-danger"><i class="fa fa-trash fa-lg"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <a href="javascript:void(0)" class="btn btn-link drml-text-primary drml-spacing-1 shadow-none font-weight-bold" id="addMoreNonroutineExpenses" style="font-size: 13px;"><i class="fa fa-plus fa-lg mr-2"></i>Tambah Pinjaman</a>
</div>

标签： javascriptphphtmljquerylaravel