Question

点击三个点后，我在卡片上添加了叠加效果。但是问题出在，当我尝试单击第一张卡片中的三个点时，同时显示了所有三个叠加层。

我知道问题所在：

将所有3个覆盖div存储在一个变量中。使用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');
}

点击叠加效果一次触发所有叠加

1 个答案: