分别向多个相同元素添加类

wljmcqd8  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(260)

我有一份长长的团队成员名单;当用户在单个成员上单击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>
nr7wwzry

nr7wwzry1#

是的,您可以遍历dom以查找模式:

$('.modal-toggle').on('click', function(e) {
    e.preventDefault();
    $(this).closest("article").next().toggleClass('visible');
});
``` `$(this)` 仅为单击的元素获取jquery Package , `.closest("article")` 找到它的 Package  `article` 元素,以及 `.next()` 转到它后面的元素(模态)。
最好是 `article` 由于使用了 `.next()` 有点脆弱(如果在 `article` 和 `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` 可靠地得到第一个。
jQueryAPI文档中的遍历部分将对此进行详细介绍。
z5btuh9x

z5btuh9x2#

快速的解决方法是放置 .modal 同时 article 父母 modal-toggle . 通过这种方式,您可以调整侦听器,使其以 .modal 对应于 .modal-toggle 点击了。

$('.modal-toggle').on('click', function(e) {
   e.preventDefault();
   //this way
  $(this).siblings('.modal').toggleClass('visible');
   // or this way or other ways too
  $(this).parent().find('.modal').toggleClass('visible');
 });

相关问题