使用类通过 document.querySelector 打开相同的弹出窗口

Question

我的网站上有一个弹出登录框，我使用登录然后调用此功能：

document.querySelector('a.logincontent').onclick = () => {

        basicLightbox.create(`
              <section>
 MY POPUP HTML CODE SITS IN HERE

`).show()

    }

这工作正常，但我的网站上同一页面上的多个位置都有登录按钮，我希望它调用相同的弹出窗口。根据研究，我需要一个循环允许多个类调用相同的函数，但我所有尝试让它工作的尝试都失败了。如果有人可以帮助我了解如何实现这一目标，那就太好了？

我尝试使用此网站上的建议https://dev.to/baransel/how-to-add-an-event-listener-to-multiple-elements-in-javascript-aco但我无法使用我的代码符合这个逻辑。

谢谢

埃迪

Answer 1

您可以通过使用多个选择器来实现此目的，如下所示：

document.querySelectorAll('a.logincontent').forEach(button => {
    button.onclick = () => {
        basicLightbox.create(`
            <section>
                MY POPUP HTML CODE SITS IN HERE
            </section>
        `).show()
    }
});

或者您可以将弹出 html 存储在变量中以使其更易于维护：

const loginPopupContent = `
    <section>
        MY POPUP HTML CODE SITS IN HERE
    </section>
`;

document.querySelectorAll('a.logincontent').forEach(button => {
    button.onclick = () => basicLightbox.create(loginPopupContent).show()
});

我对代码所做的更改是：

• 使用

  querySelectorAll()

  而不是

  querySelector()

  选择所有匹配元素
• 使用

  forEach()

  将点击处理程序附加到每个按钮
• 或者将弹出 html 存储在变量中以避免重复

确保所有按钮都有

logincontent

类：

<a href="#" class="logincontent">Login</a>
<a href="#" class="logincontent">Login Here</a>
<!-- etc -->