时间戳

首页 > 解决方案 > 所有带有类的按钮的 CSS 选择器

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

问题描述

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

标记

 <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也没有解决问题。

标签： javascripthtml

解决方案

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

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

推荐阅读