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);
});

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

1 个答案: