时间戳

首页 > 解决方案 > 物化从触发器获取数据信息

jquery - 物化从触发器获取数据信息

问题描述

有没有办法从触发按钮向模态 div 传输一些数据？

这是我的代码。

<button data-id="123" class="modal-trigger" href="#info-modal">OPEN 123</button>
<button data-id="456" class="modal-trigger" href="#info-modal">OPEN 456</button>
<div class="modal">
    <div class="modal-content">
        <h4>My Modal</h4>
        <p>this info arrives from the data-id attribute on the trigger.</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-red btn-flat">CLOSE</a>
    </div>
</div>
<script>
    jQuery( document ).ready(function($) {
        $(".modal").modal({
            onOpenStart: function(){
                // changes the p content inside .modal-content from the data-id triggered button.
            }
        });
    });
</script>

标签： jquerymaterialize

解决方案

您可以将单击侦听器添加到您的按钮，然后当单击按钮时，您可以使用this引用data-id从单击的按钮中获取属性值，然后使用方法将该值放入模式中.html()。

这是一个工作示例和您修改后的代码：

<button data-id="123" class="modal-trigger" href="#info-modal">OPEN 123</button>
<button data-id="456" class="modal-trigger" href="#info-modal">OPEN 456</button>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="modal" id="modal">
    <div class="modal-content">
        <h4>My Modal</h4>
        <p>this info arrives from the data-id attribute on the trigger.</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-red btn-flat">CLOSE</a>
    </div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
    $( document ).ready(function($) {
    $(".modal-trigger").click(function(){
          var data_id = $(this).attr('data-id');
          $("#modal .modal-content p").html(data_id);
          $('#modal').modal('show');
    });
        
    });
</script>

推荐阅读