带有类的所有按钮的CSS选择器

Question

我正在为我的目标网页制作模型，并希望通过多个按钮触发单个模型。但我无法使用每个按钮，它只适用于第一个按钮。 标记

 <button class="trigger" class="pricing_button single_button" >BUY</button>

JS脚本

var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }
    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);

我的代码只适用于第一个按钮。我在网上查了一下，发现了document.querySelectorAll，但它也没有解决问题。

Answer 1

我想，你正在寻找document.querySelectorAll api。以下代码应该有帮助：

var allTriggers = document.querySelectorAll(".trigger, .close-button");
Array.from(triggers).formEach(trigger => {
  trigger.addEventListener("click", toggleModal);
});