Эффект наложения при нажатии запускает все наложения одновременно

Question

Я добавил эффект наложения на карту при нажатии на три точки.Но проблема возникает, когда я пытаюсь щелкнуть три точки на первой карте, все 3 оверлея показываются одновременно.

Я знаю проблему:

сохранение всех 3 оверлейных дивов впеременная.используя функцию forEach, чтобы пройти через нее по отдельности.Внутри функции я добавляю класс к оверлею, этот класс применяется ко всем карточкам при нажатии.

Ссылка Codepen на проблему: https://codepen.io/subin_s/pen/NVgLgx

Я просто хочуактивировать наложение только для этой конкретной карты ... не для всех

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<div class="projects">
<div class="project-1">
 <div class="overlay">
   <i class="fas fa-times close"></i>
   <h2>Accomplishments</h2>
   <ul>
     <li>Ruby on Rails backend</li>
     <li>Materialize CSS frontend</li>
     <li>User authentication via Devise</li>
     <li>Client-side rendering via AJAX</li>
   </ul>
   <hr>

   <div class="external">
     <i class="fas fa-external-link-alt" title="View Online"></i>
     <i class="fab fa-github" title="View Code"></i>
   </div>

  </div>
  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
   </div>
</div>



  <div class="project-1">
 <div class="overlay">
   <i class="fas fa-times close"></i>
   <h2>Accomplishments</h2>
   <ul>
     <li>Ruby on Rails backend</li>
     <li>Materialize CSS frontend</li>
     <li>User authentication via Devise</li>
     <li>Client-side rendering via AJAX</li>
   </ul>
   <hr>

   <div class="external">
     <i class="fas fa-external-link-alt" title="View Online"></i>
     <i class="fab fa-github" title="View Code"></i>
   </div>

  </div>
  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
   </div>
</div>



  <div class="project-1">
 <div class="overlay">
   <i class="fas fa-times close"></i>
   <h2>Accomplishments</h2>
   <ul>
     <li>Ruby on Rails backend</li>
     <li>Materialize CSS frontend</li>
     <li>User authentication via Devise</li>
     <li>Client-side rendering via AJAX</li>
   </ul>
   <hr>

   <div class="external">
     <i class="fas fa-external-link-alt" title="View Online"></i>
     <i class="fab fa-github" title="View Code"></i>
   </div>

  </div>
  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
   </div>
</div>
  </div>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'Roboto';
}

.projects {
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.project-1 {
  position:relative;
  margin:2rem;
  width: 335px;
  height:400px;
  background-color:#fff;
  border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  overflow:hidden;
}

.image {
  position:absolute;
  width:100%;
  height:240px;
  background-color:skyblue;
}

.words {
  position:absolute;
  top:240px;
  padding:20px 20px 30px;
  color:#333;
}

.words i {
  position:absolute;
  top:27px;
  right:40px;
  cursor:pointer;
}

.words h2 {
  color:#008073;
}

.words p {
 padding:13px 0 0;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 1;
  transition: all .6s;
}

.overlay .fa-times {
  position:absolute;
  top: 20px;
  right: 20px;
  cursor:pointer;
}

.overlay h2{
  margin:20px;
  color:#795548;
  font-weight:300;
}

.overlay ul {
  margin:20px 0 50px 45px;
  line-height:40px;
}

.overlay hr {
  width: 270px;
  margin: 25px auto;
}

.external {
  display:flex;
  justify-content:space-around;
}

.external i {
  cursor:pointer;
  font-size:24px;
  color:#fff;
  background:#795548;
  padding:13px;
  border-radius:50%;
}


.active-overlay {
  top:0;
}

JS

const moreInfoElement = document.querySelectorAll('.moreinfo');
const overlay = document.querySelectorAll('.overlay');
const close = document.querySelectorAll('.close');

moreInfoElement.forEach(moreInfo => {
  moreInfo.addEventListener('click', projectInfo);
})

close.forEach(indiClose => {
  indiClose.addEventListener('click', closeOverlay);
})

// moreInfoElement.addEventListener('click', projectInfo);
// close.addEventListener('click', closeOverlay);


function projectInfo() {
  overlay.forEach(singleOverlay => {
    singleOverlay.classList.add('active-overlay');
  })
}

function closeOverlay() {
  overlay.forEach(singOverlay => {
    singOverlay.classList.remove('active-overlay');
  })
}

Answer 1

В настоящее время все оверлеи открываются, потому что вы выполняете итерацию по всему массиву / списку узлов оверлеев, найденных в документе.

Вы должны найти оверлейный элемент относительно выбранного элемента эллипса.Вы можете добиться этого, переместив двух родителей вверх по эллипсу, по которому щелкнули, и затем оттуда найдите оверлейный элемент.

function projectInfo(event) {
  let singleOverlay = event.target.parentElement.parentElement.querySelectorAll('.overlay')[0];
  singleOverlay.classList.add('active-overlay');
}