小吃吧只适用于某一类

Question

我试图与add-culture-button类的所有按钮添加事件侦听器小吃吧的一个元素，但它仅适用于第一个元素。对于其他元素，小吃吧不显示在所有（也有在控制台没有错误）。

var snackbarContainer = document.querySelector("#notification"); 
var showSnackbarButton = document.querySelector(".add-culture-button"); 
var plantingLabel = document.querySelector("#planting-label"); 
var handler = function(event) { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount - 1); 
} 

showSnackbarButton.addEventListener("click", function() { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount + 1); 
    var data = { 
     message: "Kultura je dodata u listu za setvu.", 
     timeout: 2000, 
     actionHandler: handler, 
     actionText: 'Opozovi' 
    }; 
    snackbarContainer.MaterialSnackbar.showSnackbar(data); 
}); 

有没有办法让所有的元素都可以在不重复的情况下工作？

Answer 1

原来我只需要使用querySelectorAll，而不是querySelector ...

var snackbarContainer = document.querySelector("#notification"); 
var showSnackbarButton = document.querySelectorAll(".add-culture-button"); 
var plantingLabel = document.querySelector("#planting-label"); 
var handler = function(event) { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount - 1); 
} 

for (var i = 0; i < showSnackbarButton.length; i++) { 
    showSnackbarButton[i].addEventListener("click", function() { 
     var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
     plantingLabel.setAttribute("data-badge", culturesCount + 1); 
     var data = { 
      message: "Kultura je dodata u listu za setvu.", 
      timeout: 2000, 
      actionHandler: handler, 
      actionText: 'Opozovi' 
     }; 
     snackbarContainer.MaterialSnackbar.showSnackbar(data); 
    }); 
}