javascript - 所有带有类的按钮的 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);
});