时间戳

首页 > 解决方案 > 分别将类添加到多个相同的元素

html - 分别将类添加到多个相同的元素

问题描述

我有一长串团队成员；当用户单击单个成员上的 CTA 时，一个类被添加到一个模式框中，将其设置为可见。但是，目前每个模式窗口都在同时打开，因为它们都使用相同的类。

我想知道是否可以将新类添加到被按下的特定团队成员，我知道这可以通过给每个人自己的类并拥有多个相同的 jQuery 函数来实现——但这并不是真正的解决方案我想下去，因为有很多，将来会添加更多（意味着我必须为他们更新Js代码）。

注意：我使用的是 WordPress，所以能够使用 PHP 变量等。

$('.modal-toggle').on('click', function(e) {
  e.preventDefault();
  $('.modal').toggleClass('visible');
});
.main {
  position:relative;
}

article {
  background: red;
  position: relative;
  border-top: 2px solid red;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  height: 180px;
  }

img {
  height: auto;
  width: 180px;
}
.content {
  padding: 30px 35px;
}
h3 {
  font-weight: 400;
  margin-bottom: 10px;
  text-decoration: underline;
  font-size: 22pt;
  line-height: 28pt;
}
& > span {
  font-style: italic;
}
aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
}   
div.button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: $red;
  width: 35px;
  height: 35px;
}
    
 
.modal {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.modal-overlay {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.modal.visible {
  visibility: visible;
}
.modal.visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.modal.visible .modal-window {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.modal-window {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s 0.15s;
  background: $white;
  border-top: 2px solid red;
  width: 900px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <article class="team-member filter-result result-1">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle button" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
  
  <article class="team-member filter-result result-2">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
  
  <article class="team-member filter-result result-3">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>  
  
</div>

标签： htmljquerycss

解决方案

是的，您可以遍历 DOM 找到模态：

$('.modal-toggle').on('click', function(e) {
    e.preventDefault();
    $(this).closest("article").next().toggleClass('visible');
});

$(this)只为被单击的元素获取一个 jQuery 包装器，.closest("article")找到它的包装article元素，然后.next()转到它之后的元素（模态）。

如果 thearticle和 modal 都在同一个包装元素中会更好，因为 using.next()有点脆弱（如果在 thearticle和之间添加一个元素modal呢？）。那你就可以了.closest("the-container").find(".modal")。如果你不能这样做，你可以通过使用.nextAll(".modal").first()来稍微减轻它：

$('.modal-toggle').on('click', function(e) {
    e.preventDefault();
    $(this).closest("article").nextAll(".modal").first().toggleClass('visible');
});

来自的 jQuery 对象.nextAll按从最近匹配的兄弟到进一步的顺序排列，因此first可靠地获得第一个。

这一切都在jQuery API 文档的遍历部分中进行了介绍，非常详尽。

推荐阅读