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