javascript - 显示函数上的 Bootstrap 模式不传递值

Question

我想将按钮的 id 传递给模式，但似乎无法通过，并且控制台没有显示任何错误，所以我不明白问题是什么。

我已经编辑了表单属性:

$('.showModal').on('click', function() {
  var id = $(this).data('id');
  $('#data').modal('show');
  $('#data').on('show.bs.modal', function() {
    $('.form #username').val(id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="showModal" id="0379">
  <i class="fa fa-pencil-square-o" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Edit">
    </i>
</a>

modal

<div class="modal fade" id="data" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="post" action="" id="modalForm" class="form">
        <div class="modal-body">
          <div class="card" style="width: 29.3rem;">
            <input type="file" name="file" accept="image/" />
            <img class="card-img-top" src="/../project/resources/assets/images/download.svg" alt="Card image cap">
            </input>
          </div>
          <div class="form-group">
            <label for="username">NIS</label>
            <input type="text" id="username" autocomplete="off" class="form-control" name="username" value="i_want_button_id_here">
          </div>
        </div>
      </form>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="modalSubmit">Save</button>
      </div>
    </div>
  </div>
</div>

Answer 1

当您使用.data('id')时这意味着您正在尝试定位该属性 data-id当你刚刚 id ，您可以使用 .prop() 相反，例如:

var id = $(this).prop('id');

您可以尝试定位前一个 anchor ，例如:

$('#data').on('show.bs.modal', function() {
    var id = $(this).prev('a').prop('id');

    $('.form #username').val(id);
});