用于添加和编辑的一种模式引导程序 - Upsert

Question

我有 2 个链接（添加和编辑客户表单），它们触发一个相同的引导模式。我的问题是，同一个引导模式如何检测它是来自“添加链接”或“编辑链接”？我当前的代码是    <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalCustomerForm">        Add New Customer    </a>$('#modalCustomerForm').on('shown.bs.modal', function () {    $(this).find('form')[0].reset();})

Answer 1

使用对象relatedTarget的属性event来访问触发模态打开的元素

$('#exampleModal').on('shown.bs.modal', function(e){

   const buttonId = e.relatedTarget.id;

   $(this).find('.modal-body').text(`Button id = ${buttonId}`);      

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

<!-- Button trigger modal -->

<button id="btn_1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

  Modal Button 1

</button>

<button id="btn_2" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

  Modal Button 2

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal"  aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body"></div>     

    </div>

  </div>

</div>