Javascript 在多个查询中使用document.querySelectorALL添加/删除类

我正在为一个modal编写JS代码。我对JS很陌生。有没有一种方法可以组合这两段代码？我使用这个JS来添加和删除类

我尝试使用querySelectorALL，但只有第一个查询有效

  document.querySelector('#open-modal1').addEventListener('click', function(event) {
  event.preventDefault();
  var modal = document.querySelector('#myModal1');  
  var html = document.querySelector('html');
  modal.classList.add('is-active');
  html.classList.add('is-clipped');

    modal.querySelector('.modal-background').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  });

    modal.querySelector('.bulma-modal-close').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  });  

});

  document.querySelector('#open-modal2').addEventListener('click', function(event) {
  event.preventDefault();
  var modal = document.querySelector('#myModal2');  
  var html = document.querySelector('html');
  modal.classList.add('is-active');
  html.classList.add('is-clipped');  

    modal.querySelector('.modal-background').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  });

    modal.querySelector('.bulma-modal-close').addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
  }); 

});

open-modal1应在#myModal1上运行 open-modal2应在#myModal2上运行，以此类推。 另外，删除类的两个查询在整个过程中也很常见

Html代码-

模态标题
这里有些东西

好啊
取消

这是在模态上打开的链接-

---

可能是这样的

document.querySelector('#open-modal1').addEventListener('click', function (event) {
    styleModal(event, "#myModal1");
});

document.querySelector('#open-modal2').addEventListener('click', function (event) {
    styleModal(event, "#myModal2");
});

function styleModal(event, myModal) {
    event.preventDefault();
    var modal = document.querySelector(myModal);
    var html = document.querySelector('html');
    modal.classList.add('is-active');
    html.classList.add('is-clipped');

    modal.querySelector('.modal-background').addEventListener('click', function (e) {
        e.preventDefault();
        modal.classList.remove('is-active');
        html.classList.remove('is-clipped');
    });

    modal.querySelector('.bulma-modal-close').addEventListener('click', function (e) {
        e.preventDefault();
        modal.classList.remove('is-active');
        html.classList.remove('is-clipped');
    });
}


//if you are wanting to execute both on a loop...
var myModals = document.querySelectorAll("[id^='myModal']");

for(var i = 0; i < myModals.length; i++){
    styleModal(myModals[i].id);
}

document.querySelector（“#open-modal1”）.addEventListener（'click'，函数（事件）{
styleModal（事件“#myModal1”）；
});
document.querySelector（“#open-modal2”）.addEventListener（'click'，函数（事件）{
styleModal（事件“#myModal2”）；
});
函数styleModal（事件，myModal）{
event.preventDefault（）；
var modal=document.querySelector（myModal）；
var html=document.querySelector（'html'）；
modal.classList.add（'is-active'）；
add（'is-clipped'）；
modal.querySelector（'.modal background'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
modal.classList.remove（'is-active'）；
html.classList.remove（'is-clipped'）；
});
modal.querySelector（'.bulma modal close'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
modal.classList.remove（'is-active'）；
html.classList.remove（'is-clipped'）；
});
}
//如果您希望在循环中同时执行这两个命令。。。
var myModals=document.querySelectorAll（“[id^='myModal']”）；
对于（var i=0；i

您需要在QuerySelect或All返回的元素上循环，并将事件处理程序分别分配给每个元素。您可以添加

HTML

代码并尝试进行更多解释吗？另外，我在您的代码中没有看到任何对

querySelectorAll

的调用。谢谢。因此，我可以用一个公共函数编写上面的多个查询。你能解释一下最后一部分是什么吗？再次感谢：）第二次看时，最后一部分实际上可能不完整。你不需要它，只要坚持第一部分就行了。它演示了如何查找id以“myModal”开头的所有元素，在这些元素之间循环，并针对它们执行函数。但是它没有考虑到需要触发的单个触发器。是的，模块化编程总是正确的选择！你可以考虑挑战自己，使之更加模块化。