javascript - Material Components Web - mdc attachTo 仅适用于第一个元素

Question

我正在使用 Material Components Web 创建网站。我有一个类为 .mdc-button 的按钮列表，我在我的 Javascript 文件中使用以下行激活了它。

window.button = new mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));

问题是这只适用于类 .mdc-button 的第一个元素 为什么会这样以及如何解决？

Answer 1

document.querySelector 将始终返回在 DOM 中找到的元素的第一个实例。您可以使用 document.getElementsByClassName('mdc-button') 返回 DOM 中类的完整列表。

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

也许是这样的

var x = document.getElementsByClassName('mdc-button');
var i;
for (i = 0; i < x.length; i++) {
    mdc.ripple.MDCRipple.attachTo(x[i]);
}