javascript - Materialise 获取模态触发元素

Question

如何获取触发 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>

如何获取哪个 anchor 元素触发了模式？ ready 和 complete 都只将 this 设置为模态选项，而 arguments 为空。

Answer 1

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

然后在您的点击处理程序中，使用 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);
    });
  }        
}