显示离点击按钮最近的叠加层 Jquery
Show the overlay closest to the clicked button Jquery
我在一个页面上有多张卡片,每张卡片的按钮和叠加层都具有相同的 class。当我单击省略号时,应显示与该椭圆相关的叠加层。我尝试使用 .closest()
方法,但它没有用
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via me</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
在用户单击省略号时显示叠加层
$(".card-overlay").hide();
$(".show-overlay").click(function () {
$(this).closest(".card-overlay").show();
// $(".card-overlay").show();
});
问题是因为 closest()
用于查找 parent 元素。 .card-overlay
是被点击 .show-overlay
的 parent 兄弟姐妹的 child。
要解决此问题,请使用 closest()
找到 单击的元素和目标的共同祖先,在本例中为 .card
,然后使用find()
从该祖先中检索目标。试试这个:
$(".show-overlay").click(function() {
$(this).closest('.card').find('.card-overlay').show();
});
.card-overlay { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" />...</a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via me</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" />...</a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
请注意,我将 .card-overlay
的隐藏移动到 CSS 而不是 JS。这是为了避免页面加载后执行JS造成的FOUC
我在一个页面上有多张卡片,每张卡片的按钮和叠加层都具有相同的 class。当我单击省略号时,应显示与该椭圆相关的叠加层。我尝试使用 .closest()
方法,但它没有用
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via me</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
在用户单击省略号时显示叠加层
$(".card-overlay").hide();
$(".show-overlay").click(function () {
$(this).closest(".card-overlay").show();
// $(".card-overlay").show();
});
问题是因为 closest()
用于查找 parent 元素。 .card-overlay
是被点击 .show-overlay
的 parent 兄弟姐妹的 child。
要解决此问题,请使用 closest()
找到 单击的元素和目标的共同祖先,在本例中为 .card
,然后使用find()
从该祖先中检索目标。试试这个:
$(".show-overlay").click(function() {
$(this).closest('.card').find('.card-overlay').show();
});
.card-overlay { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" />...</a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via me</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="d-flex align-items-start">
<img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
<p>Video Subject</p>
</div>
<a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" />...</a>
</div>
<div class="card-body d-flex justify-content-center">
<img src="../images/icons/play-btn.svg" alt="" />
</div>
<div class="card-overlay text-center">
<p>Share via</p>
<div class="d-flex share-btn">
<a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
<a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
<a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
</div>
</div>
</div>
</div>
请注意,我将 .card-overlay
的隐藏移动到 CSS 而不是 JS。这是为了避免页面加载后执行JS造成的FOUC