显示离点击按钮最近的叠加层 Jquery

Question

我在一个页面上有多张卡片，每张卡片的按钮和叠加层都具有相同的 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();
        });

Answer 1

问题是因为 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

显示离点击按钮最近的叠加层 Jquery

Show the overlay closest to the clicked button Jquery

jquery

css

frontend

overlay

web-frontend