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

这里的简单和动态方法将有助于避免一次又一次repeat或write编码

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

此外，在模态显示函数中，您可以使用$(this)并获得orderID元素，将id的顺序动态应用于模态，并在{ {1}}

使用此方法将使您拥有任意数量的order-id，但是您将再次重用同一模式，而不必编写更多的modal。

实时工作演示：

button

code

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

2 个答案: