Question

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

2019-07-22

392

javascript

我正在为模态框编写 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 进行操作，依此类推。另外，删除类的 2 个查询可以通用吗？

Html 代码 -

<div class="modal" id="myModal1">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete bulma-modal-close"></button>
    </header>
    <section class="modal-card-body">
      <p>There is something here</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button">Ok</button>
      <button class="button bulma-modal-close">Cancel</button>
    </footer>
  </div>
</div>

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

<a class="button" id="open-modal1" href="">Open modal</a>

Answer 1

也许是这样的

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);
}