Show the overlay closest to the clicked button Jquery-CodePudding

I have multiple cards on a page each with the buttons and overlays having the same class. When I click the ellipsis, the overlay related that ellipse should be shown. I've tried to use .closest() method however it hasn't worked

<div >
  <div >
    <div >
      <div >
        <img src="../images/icons/white-logo-icon-only.svg" alt=""  />
        <p>Video Subject</p>
      </div>
      <a ><img src="../images/icons/ellipsis.svg" alt="" /></a>
    </div>
    <div >
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div >
      <p>Share via me</p>
      <div >
        <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 >
  <div >
    <div >
      <div >
        <img src="../images/icons/white-logo-icon-only.svg" alt=""  />
        <p>Video Subject</p>
      </div>
      <a ><img src="../images/icons/ellipsis.svg" alt="" /></a>
    </div>
    <div >
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div >
      <p>Share via</p>
      <div >
        <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>

show the overlay when the user clicks the ellipsis

   $(".card-overlay").hide();
        $(".show-overlay").click(function () {
    
            $(this).closest(".card-overlay").show();
    
            // $(".card-overlay").show();
        });

CodePudding user response：

The issue is because closest() is used to look for a parent element. .card-overlay is a child of a sibling to a parent of the clicked .show-overlay.

To fix the problem use closest() to find a common ancestor of both the clicked element and the target, in this case .card, then use find() to retrieve the target from within that ancestor. Try this:

$(".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 >
  <div >
    <div >
      <div >
        <img src="../images/icons/white-logo-icon-only.svg" alt=""  />
        <p>Video Subject</p>
      </div>
      <a ><img src="../images/icons/ellipsis.svg" alt="" />...</a>
    </div>
    <div >
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div >
      <p>Share via me</p>
      <div >
        <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 >
  <div >
    <div >
      <div >
        <img src="../images/icons/white-logo-icon-only.svg" alt=""  />
        <p>Video Subject</p>
      </div>
      <a ><img src="../images/icons/ellipsis.svg" alt="" />...</a>
    </div>
    <div >
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div >
      <p>Share via</p>
      <div >
        <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>

Note that I moved the hiding of .card-overlay to CSS instead of JS. This is to avoid the FOUC caused due to JS being executed after the page loads.