材料组件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]); 
}