如何从 modalOverlay 和 closeBtn 中删除重复的代码？

问题描述

我有不同的模态窗口，我添加了一个关闭按钮但面临重复的代码，我该如何缩短 modaloverlay 和 closeBtn 的代码？由于某种原因，第二个关闭按钮不起作用，请帮助https://jsfiddle.net/uza0jm8c/4/

enter code here

解决方法

您的代码仅将点击事件添加到第一个按钮。下面的代码将使两个按钮都起作用：

var closeBtn = document.getElementsByClassName("btn-close");

for (var i = 0; i < closeBtn.length; i++) {
    closeBtn[i].addEventListener('click',(e) => {
        modalOverlay.classList.remove('modal-overlay--visible');
        modals.forEach((el) => {
            el.classList.remove('modal--visible');
        });
    });
}

,

您有两个 closeBtn，您应该使用 document.querySelectorAll 并为您创建一个 forEach closeBtn

const btns = document.querySelectorAll('.btn');
const modalOverlay = document.querySelector('.modal-overlay');
const closeBtn = document.querySelectorAll('.btn-close');
const modals = document.querySelectorAll('.modal');

btns.forEach((el) => {
  el.addEventListener('click',(e) => {
    let path = e.currentTarget.getAttribute('data-path');

    modals.forEach((el) => {
      el.classList.remove('modal-overlay--visible');
    });

    document.querySelector(`[data-target="${path}"]`).classList.add('modal--visible')
    modalOverlay.classList.add('modal-overlay--visible');
  });
});

modalOverlay.addEventListener('click',(e) => {
  if (e.target === modalOverlay) {
    modalOverlay.classList.remove('modal-overlay--visible');
    modals.forEach((el) => {
      el.classList.remove('modal--visible');
    });
  }
});

closeBtn.forEach((el) => {
  el.addEventListener('click',(e) => {
     modalOverlay.classList.remove('modal-overlay--visible');
     modals.forEach((el) => {
       el.classList.remove('modal--visible');
     });
  });
});

.modal{
  background-color: #fff;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.modal-overlay{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}
.modal-overlay--visible{
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}
.modal--visible{
  display: block;
}

<button class="btn header__box-btn" data-path="one">1</button>
<button class="btn header__box-btn" data-path="two">2</button>

<div class="modals">
  <div class="modal-overlay">
    <div class="modal modal--1" data-target="one">
      modal 1
      <button class="btn-close">close</button>
    </div>
    <div class="modal modal--2" data-target="two">
      modal 2
       <button class="btn-close">close</button>
    </div>
  </div>
</div>