主页 / 问题 / 1099125
Accepted
Ervin
Asked:2020-03-24 20:47:48 +0000 UTC2020-03-24 20:47:48 +0000 UTC

如何在 JS 中创建一组打开模态窗口的按钮？

  • 772

从理论上讲，我有几个按钮可以打开相同的模态窗口，但是这段代码不想这样做。只有将“[num]”添加到“more”变量字符串的末尾，带有数字“num”的按钮才会起作用。

我对JS完全陌生，我确信我的问题的解决方案尽可能简单，但我希望你的理解和帮助））

let more = document.querySelectorAll('.more'),
    overlay = document.querySelector('.overlay'),
    close = document.querySelector('.popup-close');

  more.addEventListener('click', function () {
    overlay.style.display = 'block';
    this.classList.add('more-splash');
    document.body.style.overflow = 'hidden';
  });

  close.addEventListener('click', function () {
    overlay.style.display = 'none';
    more.classList.remove('more-splash');
    document.body.style.overflow = '';
  });

javascript

1 个回答

  1. Best Answer

    querySelectorAll返回一个集合（如数组）而不是单个元素

    let more = document.querySelectorAll('.more'),
    overlay = document.querySelector('.overlay'),
    close = document.querySelector('.popup-close');

more.forEach(function(but){
    but.addEventListener('click', function () {
        overlay.style.display = 'block';
        this.classList.add('more-splash');
        document.body.style.overflow = 'hidden';
    })
});
    • 2

相关问题