Fatal编程技术网
  • javascript/
  • Javascript 材质设计波纹仅出现在第一个HTML元素上

Javascript 材质设计波纹仅出现在第一个HTML元素上

javascript

Javascript 材质设计波纹仅出现在第一个HTML元素上,javascript,material-design,floating-action-button,material-components,material-components-web,Javascript,Material Design,Floating Action Button,Material Components,Material Components Web,我试图在网络上实现连锁反应 我有以下虚拟HTML： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bundle.css"> </head> <body> <button class="mdc-fab" id="first&q

我试图在网络上实现连锁反应

我有以下虚拟HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="bundle.css">
    </head>
    <body>
        <button class="mdc-fab" id="first" aria-label="First">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="second" aria-label="Second">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="third" aria-label="Third">
            <div class="mdc-fab__ripple"></div>
        </button>
        <script src="bundle.js" async></script>
    </body>
</html>
以下是JS：

import {MDCRipple} from '@material/ripple';
const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
单击第一个按钮时，我会在第一个按钮上正确显示涟漪效果，但是，由于某些原因，涟漪不会出现在后面的任何按钮上

换句话说，似乎连锁反应只对第一个元素起作用，而对第二个元素不起作用。有人知道我做错了什么吗？

以下文档：

方法
querySelector（）
返回文档中与指定选择器或选择器组匹配的第一个选择器。如果未找到匹配项，则返回
null

如果要选择多个图元，请改用

但是
mdclimpe
构造函数似乎只接受一个元素。因此，您可以使用循环或将其全部激活：

// Transform the NodeList to an Array using the ES6 spread syntax (...)
const buttons = [...document.querySelectorAll('.mdc-fab')]; 
const fabRipples = buttons.map(btn => new MDCRipple(btn)); // An Array of Ripple objects
明白了！我想读这本书也有帮助。 
// Transform the NodeList to an Array using the ES6 spread syntax (...)
const buttons = [...document.querySelectorAll('.mdc-fab')]; 
const fabRipples = buttons.map(btn => new MDCRipple(btn)); // An Array of Ripple objects