jquery - 如何在Materialize的模态中通过url传递数据属性

Question

描述我使用 Materialize 创建一个按钮，打开模式并通过 data-att 传递数据，但它不起作用。

点击此链接时我想要什么

<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
                                   data-idClient="{{$client->id}}" data-nom="{{$client->nom}}" data-prenom="{{$client->prenom}}"
                                   data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
                                   ><i class="material-icons">mode_edit</i></a>

想要将数据传递给模态我的Js代码

$('.modal-trigger').leanModal({
        ready: function(e) {
            $(this).find('input[name="nom"]').val($(e.relatedTarget).data('nom'))
        }
    })

Answer 1

正如您在 documentation 中看到的那样ready 不带任何参数。

也就是说，您可以将准备好的代码移动到附加到 anchor 的新事件处理程序中:

$('.modal-trigger').leanModal();

$('.modal-trigger').on('click', function(e) {
  $('#modalEditClient').find('input[name="nom"]').val($(this).data('nom'))
})

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
    data-idClient="{{$client->id}}" data-nom="MON" data-prenom="{{$client->prenom}}"
    data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
        ><i class="material-icons">mode_edit</i></a>


<!-- Modal Structure -->
<div id="modalEditClient" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <input type="text" name="nom">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

在当前的具体化版本(0.98.2)中，leanModal不再存在，您需要使用modal 。在此版本中，存在 ready 回调，因此您可以编写:

$('.modal').modal({
    ready: function(modal, trigger) {
        modal.find('input[name="nom"]').val(trigger.data('nom'))
    }
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
    data-idClient="{{$client->id}}" data-nom="MON" data-prenom="{{$client->prenom}}"
    data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
        ><i class="material-icons">mode_edit</i></a>


<div id="modalEditClient" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
        <input type="text" name="nom">
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>