单击许多类似按钮中的任何一个时如何触发单个 MDL snackbar 事件

Question

我正在使用 Google's Material Design Lite

的小吃店

我对 javascript 不是很精通，所以我将解释这种情况 - 假设有五个按钮，当按下其中一个按钮时，我希望快餐栏显示一条通用消息。我该如何实施？

虽然下面的代码只有 一个按钮 触发 snackbar 事件，但我可以有多个按钮在单击时触发同一个 snackbar 吗？

<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  var snackbarContainer = document.querySelector('#demo-toast-example');
  var showToastButton = document.querySelector('#demo-show-toast');
  showToastButton.addEventListener('click', function() {
    'use strict';
    var data = {message: 'Common Message '};
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>

示例用例： 在论坛中，当用户单击评论的赞成票或反对票按钮时（假设有很多评论，因此有很多按钮), snackbar 显示常用消息 "Please log in to vote".

Answer 1

我只需要定义一个 'throw snackbar' 函数并将它传递给您要使用它的所有按钮的侦听器。

(function () {
    'use strict';
    var snackbarContainer = document.querySelector('#demo-toast-example');
    var showToastButton1 = document.querySelector('#demo-show-toast1');
    var showToastButton2 = document.querySelector('#demo-show-toast2');

    function loggedOutSnackbar () {
      var data = {message: 'Common Message'};
      snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }

    showToastButton1.addEventListener('click', loggedOutSnackbar);
    showToastButton2.addEventListener('click', loggedOutSnackbar);
})();

~~我很确定您也不需要将其全部包装在一个函数中。这应该适用于您的脚本标签或您可以在 html 中调用的单独的 js 文件。~~

我被纠正了！立即调用的函数对于避免污染全局命名空间很重要。您可以将那部分重新添加进去。我不习惯将 JS 放在 HTML 中。 :D

单击许多类似按钮中的任何一个时如何触发单个 MDL snackbar 事件

How to trigger a single MDL snackbar event when either one of many similar buttons are clicked

javascript

material-design-lite

我正在使用 Google's Material Design Lite