我有一份长长的团队成员名单;当用户在单个成员上单击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>
2条答案
按热度按时间nr7wwzry1#
是的,您可以遍历dom以查找模式:
$('.modal-toggle').on('click', function(e) {
e.preventDefault();
$(this).closest("article").nextAll(".modal").first().toggleClass('visible');
});
z5btuh9x2#
快速的解决方法是放置
.modal
同时article
父母modal-toggle
. 通过这种方式,您可以调整侦听器,使其以.modal
对应于.modal-toggle
点击了。