物化获取模态触发器元素

Materialize get modal trigger element

本文关键字：触发器 元素 模态 获取      更新时间：2023-09-26

如何获得触发Materialize Modal的元素?

给定这个代码:

<a class="trigger-modal" href="#modal1" data-id="1">Item 1</a>
<a class="trigger-modal" href="#modal1" data-id="2">Item 2</a>
<a class="trigger-modal" href="#modal1" data-id="3">Item 3</a>
<div id="modal1" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Edit Model</h4>
    <form> ... </form>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
  </div>
</div>
<script type="text/javascript">
$(function () {
  $('.modal-trigger').leanModal({
    dismissible: false,
    ready() { console.log('Ready', this, arguments); },
    complete() { console.log('Closed', this, arguments); }
  });
});
</script>

如何获取触发模态的锚点元素?ready和complete只有this设置为模态选项，arguments为空

使用JavaScript getElementsByTagName获取所有锚;如果锚共享一个类，getElementsByClassName也可以工作。添加href="javascript:void(0)"到你的锚

然后在单击处理程序中，使用console.log(event.target)或(e.target)

var doc = document;
var anchors = doc.getElementsByTagName('a');
if(anchors){
  for (var i = 0; i < providers.length; i++) {
    anchors[i].addEventListener("click", function(event){
      console.log(event.target);
      console.log(event.target.id);
      console.log(event.target.className);
      console.log(event.target.innerHTML);
    });
  }        
}

从Materialize Modal文档中，似乎没有其他东西传递到ready或complete回调中，但是您可以通过添加代码来记录上次单击的锚。

可以添加:

 onclick="window.lastAnchorClicked = this;"

到你的锚。然后使用window.lastAnchorClicked访问上次点击的锚

这是我的方法:

$('.modal').modal({
ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
   console.log(trigger.prevObject[0].id);
  },
});

这将打印触发要显示的模态的对象的id。

我希望任何人谁需要这个发现这是有用的!

相关文章：