Question

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

单击此链接时我想要的内容

<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中所看到的，就绪不会带任何参数。

所以说，你可以在附加到锚点的新事件处理程序中移动你准备好的代码：

$('.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>

如何在materialize的模态中传递数据属性over url

1 个答案: