如何找到在 Materialise 模态中单击了什么按钮？

Question

我使用的是 tingle.js and pikday and now I want to use materialize css，因为它有模式和日期选择器。

在 tingle 中我添加了按钮和按钮点击后的动作很容易

//add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

我在 Materialise 中设置了几个按钮 https://jsfiddle.net/radek/onzx31q6/6/ 但我不知道如何找出点击了哪个按钮。

 <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>

Answer 1

您可以使用自定义属性来跟踪为 Materialize 单击了哪个按钮，我在下面就是这样做的。

(() => {
  // the Modal.onClose event handler
  const onCloseEnd = (modal) => {
    const last = document.querySelector(`#${modal.id}`).getAttribute('data-clicked');
    document.querySelector('#last-clicked').innerText = last;
  };

  // set up modals
  const nodes = document.querySelectorAll('.modal');
  const modals = M.Modal.init(nodes, {
    onCloseEnd
  });

  // add event for footer buttons to change data-clicked property
  nodes.forEach(node => {
    node.querySelectorAll('.modal-footer a')
      .forEach(btn => {
        btn.addEventListener('click', evt => {
          node.setAttribute('data-clicked', evt.target.innerText);
        }, true);
      });
  });
})();

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <button data-target="modal1" class="btn modal-trigger">Modal</button>

  <h5>You clicked: <span id="last-clicked">nothing</span></h5>

  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>

如何找到在 Materialise 模态中单击了什么按钮？

How to find what button was clicked in Materialize modal?

javascript

materialize