单击事件仅在类的一个元素上触发

Question

I have this layout with cards where each card has this markup:

 <div class="card">
  <div class="content">
    <div class="brand">
      <img src="/assets/logo.png" alt="">
    </div>
    <div class="name">
      <h3>Lorem ipsum</h3>
    </div>
    <div class="price">
      25€/year
    </div>
    <div class="buttons">
      <a href="#" class="btn btn-color">Buy</a>
      <a href="#" class="btn btn-ghost overlay-toggle">Details</a>
     </div>
    </div>
    <div class="details">
             ...Details here...
    </div>
  </div>

When I click the details button I want the details div to pop over the card. I have this working as I want, but the problem is that the event fires on all the cards at once instead of just the one I clicked the button from.

This is the jQuery for the click:

var overlayToggle = $('.overlay-toggle');
var overlayClose = $('.close-overlay');
var overlay = $('.details');

overlayToggle.on('click', (e) => {
  e.preventDefault();
  overlay.css({
    'visibility': 'visible',
    'opacity': '1',
    'transform': 'scale(1)'
  });
});

overlayClose.on('click', () => {
  overlay.css({
    'visibility': 'hidden',
    'opacity': '0',
    'transform': 'scale(0)'
  });
});

Answer 1

The problem is that you have defined overlay as a JQuery wrapped set that contains all the details elements and in each event handler, you tell the entire set to display or hide.

What you need to do is, in the event handlers, find only the details element that corresponds to the button that was clicked.

 var overlayToggle = $('.overlay-toggle'); var overlayClose = $('.close-overlay'); overlayToggle.on('click', (e) => { e.preventDefault(); // Find the .details within nearest ancestor that is .card $(".details", $(e.target).closest(".card")).css({ 'visibility': 'visible', 'opacity': '1', 'transform': 'scale(1)' }); }); overlayClose.on('click', () => { overlay.css({ 'visibility': 'hidden', 'opacity': '0', 'transform': 'scale(0)' }); }); 

 .details { visibility:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="content"> <div class="brand"> <img src="/assets/logo.png" alt=""> </div> <div class="name"> <h3>Lorem ipsum</h3> </div> <div class="price"> 25€/year </div> <div class="buttons"> <a href="#" class="btn btn-color">Buy</a> <a href="#" class="btn btn-ghost overlay-toggle">Details</a> </div> </div> <div class="details"> ...Details here... </div> </div> <div class="card"> <div class="content"> <div class="brand"> <img src="/assets/logo.png" alt=""> </div> <div class="name"> <h3>Lorem ipsum</h3> </div> <div class="price"> 25€/year </div> <div class="buttons"> <a href="#" class="btn btn-color">Buy</a> <a href="#" class="btn btn-ghost overlay-toggle">Details</a> </div> </div> <div class="details"> ...Details here... </div> </div> <div class="card"> <div class="content"> <div class="brand"> <img src="/assets/logo.png" alt=""> </div> <div class="name"> <h3>Lorem ipsum</h3> </div> <div class="price"> 25€/year </div> <div class="buttons"> <a href="#" class="btn btn-color">Buy</a> <a href="#" class="btn btn-ghost overlay-toggle">Details</a> </div> </div> <div class="details"> ...Details here... </div> </div> 

Answer 2

overlayToggle.on('click', (e) => {
  e.preventDefault();
  $(e.target).parents('.card').find('.details').css({
    'visibility': 'visible',
    'opacity': '1',
    'transform': 'scale(1)'
  });
});
overlayClose.on('click', () => {
  e.preventDefault();
  $(e.target).parents('.card').find('.details').css({
    'visibility': 'hidden',
    'opacity': '0',
    'transform': 'scale(0)'
  });
});

You can also use like this, the problem is you haven't pointed to which details block you need to display.