从按钮动态获取模式中的数据属性

Question

一个新手想寻求一点帮助。

我想在模态打开时对它的内容做一些事情，但是如何从打开的模态中获取 id？

我的代码：

<a class="pdfId btn btn-success" data-id="{{ $value['id'] }}"  data-toggle="modal" data-target="#myModal">view</a>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">view</h4>
            </div>
            <div class="modal-body">order number: {{ $value['id'] }}</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>  

JS/Jquery：

$('a').click(function(){
    $(this).attr('data-id')  ;
});

请帮助我解决这种情况。感谢您的所有帮助！

Answer 1

使用 jquery 可以使用$().on('click', function() { 函数

示例：

$('[data-target="#modal-one"').on('click', function() {
  alert('data-id: ' + $('#modal-one').attr('data-id'));
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-one">Modal One</button>

<!-- Modal -->
<div id="modal-one" data-id="100" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">data-id attribute: 100</div>
    </div>
  </div>
</div>

Answer 2

这里有更多 simple 和 dynamic 方法，这将有助于避免repeat 或write 一次又一次地编码

您可以简单地使用relatedTarget 函数来查看您点击了哪个按钮，然后从他们那里获得该点击按钮的data-id。

此外，在您的模态显示功能中，您可以使用$(this) 并获取orderID 元素，将订单id 动态应用于您的模态，并在您的modal 中显示order-id

使用这种方法可以让您拥有尽可能多的button，但您将再次重复使用相同的模态，而无需编写更多code。

现场工作演示：

$('#myModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var getID = button.data('id')
  var getAdd = button.data('adress')
  var getCity = button.data('city')
  var getPostCode = button.data('postcode')
  var modal = $(this)
  modal.find('#orderID').text('Order ID = ' + getID)
  modal.find('#Address').text('Address = ' + getAdd + ' , ' + getCity + ' , ' + getPostCode)
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<a class="pdfId btn btn-success" data-id="1" data-adress="123 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View</a>
<a class="pdfId btn btn-success" data-id="2" data-adress="100 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 2</a>
<a class="pdfId btn btn-success" data-id="3" data-adress="150 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 3</a>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">View</h4>
      </div>
      <div class="modal-body">
        <span id="orderID"></span>
        <br>
        <span id="Address"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>