如何让多个带相同类的按钮触发同一个登录弹窗？

嘿Eddie，我来帮你搞定这个问题～

你现在的问题出在 document.querySelector('a.logincontent') 只会选中页面上第一个匹配的元素，所以只有第一个登录按钮能唤起弹窗。要让所有带这个类的按钮都生效，我给你两种简单靠谱的实现方式：

方法一：遍历所有匹配元素绑定事件 #

先用 document.querySelectorAll() 选中所有带 logincontent 类的链接，接着循环给每个按钮绑定点击事件就行：

// 把弹窗创建逻辑抽成独立函数，避免重复写代码
const openLoginPopup = () => {
  basicLightbox.create(`
    <section>
        MY POPUP HTML CODE SITS IN HERE
    </section>
  `).show()
}

// 选中页面上所有登录按钮
const loginButtons = document.querySelectorAll('a.logincontent')

// 给每个按钮绑定点击事件
loginButtons.forEach(button => {
  button.onclick = openLoginPopup
})

这样每个按钮点击时都会调用同一个弹窗函数，完全满足你的需求～

方法二：事件委托（更推荐，适配动态元素） #

如果之后你的页面可能会动态新增登录按钮（比如通过异步加载内容），上面的方法就需要重新绑定事件，这时候用事件委托会更省心：

我们可以把点击事件绑定到这些按钮的共同父元素上（比如用body，或者更靠近按钮的父容器，性能会更好），然后判断点击的目标是不是我们的登录按钮，再触发弹窗：

const openLoginPopup = () => {
  basicLightbox.create(`
    <section>
        MY POPUP HTML CODE SITS IN HERE
    </section>
  `).show()
}

// 绑定到父元素，这里用body举例，建议换成按钮所在的最近父容器
document.body.addEventListener('click', (e) => {
  // 检查点击的元素是否是登录按钮
  if (e.target.classList.contains('logincontent')) {
    e.preventDefault() // 阻止a标签默认跳转行为（如果你的a标签不需要跳转的话）
    openLoginPopup()
  }
})

这种方法的优势在于，不管之后新增多少个带logincontent类的按钮，都不用再额外绑定事件，自动就能触发弹窗，非常灵活～

备注：内容来源于stack exchange，提问作者Ben Edwards